@jett
Если у вас уже есть настроенный маршрутизатор в Angular, вам просто нужно создать новый маршрут и при необходимости компонент для новой страницы. Вот пример того, как можно создать новую HTML страницу:
- Определите новый маршрут в файле маршрутизатора (например, app-routing.module.ts):
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewPageComponent } from './new-page/new-page.component'; // импортируйте компонент для новой страницы
const routes: Routes = [
{ path: 'new-page', component: NewPageComponent } // новый маршрут для новой страницы
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
|
- Создайте компонент для новой страницы (например, new-page.component.ts):
1
2
3
4
5
6
7
8
|
import { Component } from '@angular/core';
@Component({
selector: 'app-new-page',
templateUrl: './new-page.component.html',
styleUrls: ['./new-page.component.css']
})
export class NewPageComponent { }
|
- Создайте соответствующий HTML-шаблон для новой страницы (например, new-page.component.html):
1
|
<p>This is the content of the new page!</p>
|
- Теперь вы можете перейти на новую страницу, вызвав метод navigate из вашего компонента (например, в app.component.ts):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private router: Router) {}
navigateToNewPage() {
this.router.navigate(['/new-page']);
}
}
|
- И в конце добавьте ссылку или кнопку в вашем основном HTML-шаблоне (например, app.component.html):
1
|
<button (click)="navigateToNewPage()">Go to New Page</button>
|
После этого, при клике на кнопку "Go to New Page", вы будете перенаправлены на вашу новую HTML страницу с содержимым новой страницы.