如何导航到不同于 app.component.ts 的组件？

Question

我是 Angular 2+ 的新手，所以这可能是一个显而易见的问题。

我想导航到用户设置页面，其中导航是侧边栏而不是 header 中的菜单。为此，我想我需要以某种方式导航到不同的根组件（不是 app.component）。如何在 Angular 中最好地解决这个问题？

下面您会看到我在 app.component.html 中使用 <app-header></app-header> 的意思，它在页面顶部而不是左侧呈现导航栏边.

app.component.html

  <app-header></app-header>

  <router-outlet></router-outlet>

  <app-footer></app-footer>

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@core/services/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  // encapsulation: ViewEncapsulation.None
})
export class AppComponent {

  constructor(public authService: AuthService, private router: Router) {}

}

Answer 1

app.component 将始终与您的 app.module 链接，但不必是您创建整个布局的地方。

您可能希望在您的 HTML 上只留下一个 <router-outlet></router-outlet> 部分，然后根据路线创建不同的 shell/layouts。

想想 app.component 文件将需要它来引用您的根组件，但并不严格需要包含任何类型的布局。然后你可以利用布局到子组件。

如何导航到不同于 app.component.ts 的组件？

How to navigate to a component different than app.component.ts?

angular-routing

angular

angular-router