Angular Router Child 不渲染

Question

在我的 app.module.ts 中，我声明了一个子路由器组件。 当我想导航到这一点时，它会像预期的那样更改 url，但 html 会渲染。

import { UserComponent } from './admintiles/user/user.component';
...
{
path: 'admin', component: AdminComponent, canActivate: [AuthGuardService], resolve: {
  user: UserResolve
},
children: [
  { path: 'user', component: UserComponent, canActivate: [AuthGuardService], resolve: {
    user: UserResolve
  }, data: {roles: 'Admin'}
},
],
data: {roles: 'Admin'}

}

用户组件

    @Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor(private route: ActivatedRoute, private http:HttpClient) { }
  user: any;

  ngOnInit(): void {
    this.route.data.subscribe((data) => { 
      this.user = data.user;
    }); 
  }

}

管理员.component.html

    <div class="tiles">
      <div class="userTile" [routerLink]="['user']">
          <div class="tileContainer">
          ...

有人能发现我的问题吗？

Answer 1

根据角度文档，当 Nesting Routes 时，您还应该包含一个

第二个 除了 AppComponent 中的那个。

在您的情况下，AdminComponent 是父路由，UserComponent 是子路由，它将在 AdminComponent 内呈现。要指示 Angular 您希望组件准确呈现的位置，请使用第二个 <router-outlet></router-outlet>。

admin.component.html

<div class="tiles">
  <div class="userTile" [routerLink]="['user']">
    <div class="tileContainer">
      <router-outlet></router-outlet>  // UserComponent template will be rendered here 
    </div>
  </div>
</div>

还请记住，这种子路由方法不允许您一次渲染多个子路由。因此，也许您希望改进您​​的代码，以便以灵活的方式选择要呈现的子组件，并仍然应用来自 tileContainer 的样式。

<ul class="tilesNavigation">
  <li><a routerLink="user-type-1">User type 1</a></li>
  <li><a routerLink="user-type-2">User type 2</a></li>
  <li><a routerLink="user-type-3">User type 3</a></li>
</ul>
<div class="tileContainer">
  <router-outlet></router-outlet>  // Child templates will be rendered here 
</div>