الانتقال routing في angular

بعد إنشاء وتعريف المكون بالـ module  والذي يمثل صفحة كما ذكرنا سابقا  , تبقت لنا الخطوة الاخيرة وهي اختيار مسار الصفحة الذي يسمى بالـ routing

نذهب الى الملف   app-routing.module.ts   ونلقي نظرة سريعة عليه

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

  المسارات يتم وضعها  بهده المصفوفة 

const routes: Routes = [];

لنضع مسار المكون الخاص بنا 

const routes: Routes = [
   {path: 'about',component: ComponentnameComponent,} ,
];

المسار about هو الرابط الذي نختاره ليظهر محتوى هذا المكون 

ولا ننسى عمل import للمكون الذي وضعناه 

import { ComponentnameComponent } from './componentname/componentname.component';

ليصبح محتوى ملف  app-routing.module.ts   بهدا الشكل

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ComponentnameComponent } from './componentname/componentname.component';

const routes: Routes = [
  {path: 'about',component: ComponentnameComponent,} ,
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

الان انتهينا من ربط المكون بالمسار نحفظ كل شيء ونجرب النتيجة بالمتصفح

بعد الضغط على رابط المسار سوف يستعرض لنا المشروع محتوى المكون الذي أنشأناه والذي هو هذا componentname.component.html  

<p>
  componentname works!
</p>

الان لنذهب الى ملف المكون componentname.component.ts   

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-componentname',
  templateUrl: './componentname.component.html',
  styleUrls: ['./componentname.component.css']
})
export class ComponentnameComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

لنجرب ان نضع أكواد بالدالة ngOnInit

مثلا لنكتب 

  ngOnInit() {
    console.log('welcome to about page !');
  }

احفظ ونفذ على المتصفح ولا تنسى فتح الـ debuger بالمتصفح بالضغط   لنرى النتيجة

تم تنفيذ التعليمة مباشرة بعد الضغط على المسار عند اقلاع  المكون