Angular 角度路由器子剂量渲染

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

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">
          ...

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

...

---

有人能发现我的问题吗？

根据angular文档，您还应该包括

除了AppComponent中的第二个

在您的例子中，

AdminComponent

是父路由，

UserComponent

是子路由，它将在

AdminComponent

中呈现。要指示要精确渲染组件的角度，请使用第二个

admin.component.html

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

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

---

根据angular文档，当

除了AppComponent中的第二个

在您的例子中，

AdminComponent

是父路由，

UserComponent

是子路由，它将在

AdminComponent

中呈现。要指示要精确渲染组件的角度，请使用第二个

admin.component.html

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

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

---

完美-现在html将在我的管理组件中呈现，但我对子路由的理解是错误的。我想显示一个完整的新站点，而不是在我的管理站点的html中：）事实上，当父组件和子组件具有某些连接逻辑时，将使用子路由。例如，在父产品页面（/products）中，您将按id（/products/：id）显示不同的产品。根据应用程序的大小，考虑将逻辑划分成不同的模块，而不是使用唯一的App.Cuffel.T.Struts——现在HTML将呈现在我的管理组件中，但是我对子路径的理解是错误的。我想显示一个完整的新站点，而不是在我的管理站点的html中：）事实上，当父组件和子组件具有某些连接逻辑时，将使用子路由。例如，在父产品页面（/products）中，您将按id（/products/：id）显示不同的产品。根据应用程序的大小，考虑将逻辑划分为不同的模块，而不是只使用一个唯一的App.Cutto.ts。