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

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

jett

от jett , в категории: JavaScript , год назад

12 | 0

2 ответа

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

autumn_parker

от autumn_parker , год назад

@jett

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

Установите модуль маршрутизации Angular, выполнив команду npm install @angular/router.
Импортируйте модуль маршрутизации в вашем основном модуле AppModule, добавив следующий код:

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 { }

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

import { Router } from '@angular/router';

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

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

Добавьте место для отображения содержимого на вашем основном HTML-шаблоне, где будет отображаться содержимое новой страницы:

1	<router-outlet></router-outlet>

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

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

1 | 0

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

magdalen_kub

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

@jett

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

Определите новый маршрут в файле маршрутизатора (например, app-routing.module.ts):

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):

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):

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 страницу с содержимым новой страницы.

0 | 0

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

2 ответа

Похожие обсуждения: