Angular 6 路由

  路由代表在页面之间导航，你已经看到许多网站都有指向新页面的链接，这都可通过路由来实现。这里我们所指的页面将以组件的形式出现。我们已经看到了如何创建组件。现在让我们创建一个组件，看看如何使用路由。

  在app.module.ts中，我们现在必须包括路由器模块，如下所示

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }
import { RouterModule} from '@angular/router'

  这里，RouterModule是从angular/router导入的。该模块包含在导入中，如下所示

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

  RouterModule指的是forRoot，它将输入作为数组，数组又具有路径和组件的对象。路径是路由器的名称，组件是类的名称，即创建的组件。

  现在让我们看看组件创建的文件：

New-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

  突出显示的类在主模块的导入中提到。

New-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

  现在，我们需要随时显示html文件中的上述内容，或者从主模块点击。为此，我们需要在app.component.html添加路由器详细信息。

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>

  在上面的代码中，我们已经创建了锚链接标签，并将routerLink命名为“new-cmp”。这在app.module.ts中称为路径。

  当用户点击新组件时，页面应该会显示内容。为此，我们需要以下标签：<router-outlet> </router-outlet>.。

  上述标签确保当用户点击新组件时，new-cmp.component.html的内容会显示在页面上。

  现在让我们看看输出是如何在浏览器上显示的。

  当用户单击New component时，您将在浏览器中看到以下内容。

  url包含http://localhost:4200/new-cmp。在这里，new-cmp被附加到原始url，这是app.module.ts和app.component.html路由器链接中给出的路径。

  当用户单击New component时，页面不会刷新，内容不会重新加载就显示给用户。点击时，只有特定的站点代码会被重新加载。当我们在页面上有大量内容，并且需要根据用户交互来加载时，此功能会有所帮助。该功能还提供了良好的用户体验，因为页面没有重新加载。