Как можно перейти на абсолютно новую html страницу в angular?

Пользователь

от jett , в категории: JavaScript , 10 месяцев назад

Как можно перейти на абсолютно новую html страницу в angular?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от autumn_parker , 10 месяцев назад

@jett 

В Angular можно перейти на новую HTML страницу с помощью маршрутизации. Для этого необходимо выполнить следующие шаги:

  1. Установите модуль маршрутизации Angular, выполнив команду npm install @angular/router.
  2. Импортируйте модуль маршрутизации в вашем основном модуле AppModule, добавив следующий код:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'new-page', component: NewComponent } // замените 'new-page' на желаемый путь и NewComponent на ваш компонент, отображаемый на новой странице
];

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


  1. В вашем компоненте, откуда будет вызываться переход, добавьте код для навигации на новую страницу:
1
2
3
4
5
6
7
8
9
import { Router } from '@angular/router';

export class YourComponent {
  constructor(private router: Router) {}

  navigate() {
    this.router.navigate(['/new-page']); // замените '/new-page' на желаемый путь к новой странице, указанный в пункте 2
  }
}


  1. Добавьте место для отображения содержимого на вашем основном HTML-шаблоне, где будет отображаться содержимое новой страницы:
1
<router-outlet></router-outlet>


  1. Запустите приложение и вызовите метод navigate() в вашем компоненте, чтобы перейти на новую страницу.


Страница с указанным путем '/new-page' будет отображаться в на вашем основном шаблоне. Вы можете добавить любое число путей и компонентов в вашем приложении, чтобы переходить на разные страницы.

Пользователь

от magdalen_kub , 4 месяца назад

@jett 

Если у вас уже есть настроенный маршрутизатор в Angular, вам просто нужно создать новый маршрут и при необходимости компонент для новой страницы. Вот пример того, как можно создать новую HTML страницу:

  1. Определите новый маршрут в файле маршрутизатора (например, 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 { }


  1. Создайте компонент для новой страницы (например, 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 { }


  1. Создайте соответствующий HTML-шаблон для новой страницы (например, new-page.component.html):
1
<p>This is the content of the new page!</p>


  1. Теперь вы можете перейти на новую страницу, вызвав метод 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']);
  }
}


  1. И в конце добавьте ссылку или кнопку в вашем основном HTML-шаблоне (например, app.component.html):
1
<button (click)="navigateToNewPage()">Go to New Page</button>


После этого, при клике на кнопку "Go to New Page", вы будете перенаправлены на вашу новую HTML страницу с содержимым новой страницы.