Angular 路由器子项不呈现

Question

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

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;
    }); 
  }

}

admmin.component.html

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

有人能发现我的问题吗？

Answer 1

根据 angular 文档，当 Nesting Routes 时，您还应该包括一个

second < router-outlet > in addition to the one in 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>

Angular 路由器子项不呈现

Angular Router Child dosent render

typescript

angular

angular-router