angular - 角路由器子剂量渲染
问题描述
在我的 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;
});
}
}
adminmin.component.html
<div class="tiles">
<div class="userTile" [routerLink]="['user']">
<div class="tileContainer">
...
有人能发现我的问题吗?
解决方案
根据角度文档,当嵌套路由时,您还应该包括一个
第二个 <router-outlet> 除了 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>
推荐阅读
- c++ - 无法清除字符串引用
- reactjs - 在 Slick 内第一次单击时,锚标记“ ”不起作用
- azure - 还原加入域的加密虚拟机
- android - 具有单一事实来源的 Android 用例
- lisp - 列表中位置 n 的元素是什么
- django - 带有外部存储的 url.py settings.py 和 Dropbox
- python-3.x - Django - 表单未保存到 Db
- r - 选择具有多个 if 和 if else 语句的行 (R)
- javascript - 执行 php 脚本后的 JavaScript 警报窗口
- r - 使用 NA 和 R 中其他变量的值进行变异和 ifelse