import { Component } from '@angular/core';
@Component({
templateUrl: './list1.component.html',
selector: 'app-list1'
})
export class List1Component {
}
<!--The content below is only a placeholder and can be replaced.-->
<h1>Test Site</h1>
<nav>
<a routerLink="/" routerLinkActive="active">Main</a>
<a routerLink="/hello" routerLinkActive="active">Hello</a>
<a routerLink="/list1" routerLinkActive="active">List 1</a>
</nav>
<!-- Сюда выводится содержимое из ссылок--->
<router-outlet></router-outlet>
import { Component } from '@angular/core';
@Component({
selector: 'app-root', // Куда вынесится модуль в index.html
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router'; // для роутинга
import { NgModule } from '@angular/core';
// Импортируем компоненты
import { AppComponent } from './app.component';
import { HelloWorldListComponent } from './hello-world-list/hello-world-list.component';
import { List1Component} from './list1/list1.component';
@NgModule({
declarations: [
AppComponent, HelloWorldListComponent, List1Component // Добавляем компоненты
],
imports: [ // Импортруем модули
BrowserModule,
RouterModule.forRoot([ // Настриваем роутинг
{ path: '', redirectTo: 'hello', pathMatch: 'full' },
{ path: 'hello', component: HelloWorldListComponent },
{ path: 'list1', component: List1Component}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }