- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个菜单栏,其中包含从 express api 加载的菜单列表,每个菜单都引用了一个页面,该页面有一个别名,该别名将是该页面的 URL我试图在单击菜单时加载页面,它已完成,但仅在我刷新页面时这是我的菜单代码
export class MenuList implements OnInit {
menus:Menu[];
menu:Menu;
page:Page;
constructor(private router:Router,
private menuService:MenuService) {
}
getMenus():void {
this.menuService.getMenus()
.subscribe(
menus => this.menus = menus, //Bind to view
err => {
// Log errors if any
console.log(err);
}
);
}
getPage(id):void {
this.menuService.getPage(id)
.subscribe(
page => this.page = page, //Bind to view
err => {
// Log errors if any
console.log(err);
});
}
ngOnInit():void {
this.getMenus();
}
这是我的模板菜单
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar" style="background-color: #97455f">
<div class="navv">
<ul *ngFor="let menu of menus">
<li class="col-lg-1 col-md-1 col-xs-12 col-sm-12"><a [routerLink]="[menu.page.alias]">{{menu.title}}</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
我认为问题出在我的页面组件的 ngOnInit 上,它没有被调用
@Component({
selector: 'page',
templateUrl: './page.component.html'
})
export class PageComponent implements OnInit {
alias: string;
page:Page;
constructor(private router:Router,
private route: ActivatedRoute,
private pageService:PageService) {
this.route.params.subscribe(
(params : Params) => {
this.alias = params["alias"];
console.log(this.alias)
}
);
}
ngOnInit():void {
debugger;
this.pageService.getPage(this.alias).subscribe(page => {
this.page = page;
console.log(this.page);
});
}
}
这是我的页面模板
<p *ngIf="page" [innerHTML]="page.content" ></p>
这是我的应用路由代码
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: ':alias', component: PageComponent },
{ path: 'archived', component: ArchivedComponent },
{ path: 'home', component: HomeComponent },
{ path: 'menu', component: MenuList },
{ path: 'detail/:id', component: ActualiteDetailComponent },
{ path: 'contact', component: ContactComponent },
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
这是我的应用组件
@Component({
selector: 'my-app',
template: `
<menu-list></menu-list>
<hr>
`
})
export class AppComponent {
}
最佳答案
这是 Gunter 所谈论内容的代码示例:
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(
params => {
let id= +params['id'];
this.getProduct(id);
});
}
此代码监视参数的变化并执行箭头函数内的任何代码。
关于routerlink 更改时不调用 Angular 2 ngOnInit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45864816/
In the Angular documentation , routerLink指令选择器定义为: :not(a)[routerLink] 据我所知,这意味着“所有具有routerLink属性的非标
[routerLink] 和 routerLink 有什么区别?你应该如何使用它们? 最佳答案 您会在所有指令中看到这一点: 当您使用括号时,这意味着您正在传递一个可绑定(bind)属性(一个变量)。
我真的很困惑我是否应该使用 About 或 About 最佳答案 两者都是正确的。 About 和 About 将路径作为字符串传递 同时 About 传递一组路由器命令。 两者都受支持。 https
我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标签没有问题,在登录页面中的 ngOnInit 期间,我可以按预期检索状态。使用标签主页也是导航,但状态结果
我试图在我的 routerLink 中传递一个 id,我怎么能连接它? doesnt work. 你有解决方案吗? 提前致谢 最佳答案 你去吧。 Link 关于 Angular 变量到 rou
所以我有一个包含 2 个独立部分的应用程序,需要单独导航,我认为 Aux Routing 是可行的方法。 这是我的路线: export const ROUTES: Routes = [ { pat
我有一个routerLink在我的页面上,转到某个路线,但我收到此错误 基本上,我有一个具有唯一 id 的 Assets 页面,然后当您单击按钮时,id 会发生变化,并且路线应该更新,因此 asset
我对此组件的 html 调用 这是一个动态组件,然后在 onBtnActionClicked($event) 中需要像这样重定向 {{detail.detailId}} 但是正如你所
我的主 app.html 文件中有一个简单的应用程序,其结构如下。 在我的导航列表组件中,我可以轻松创建 routerLinks,如下所示: link 但是,当我进入路由器导出内呈
我正在尝试将 routerLink 与以下函数一起使用: Home callHome(data){ //perform some operations this.router.navig
我在教程中看到他们对 routerLink 属性使用了两种类型的语法。 我找不到任何说明它们之间差异的文档。 最佳答案 这是关于 Angular 非常重要的了解!当您在属性周围使用 [] 时,这意
... path: ':category/:page', ... {{category.attributes.name}} 浏览器中routerLink的第一个参数是NaN。我该如何修复它?
我正在尝试创建一个具有登录功能的 Angular 应用程序。 我用过ng cli生成空白应用程序。它带有 AppComponent 。 然后我创建了一个 LoginComponent和一个 HomeC
我有 2 一切都很好,这是我的RouteConfig在配置文件组件内: @Component({ selector : "profile", templateUrl: '/client
在这个演示应用程序中,我在延迟加载的书籍模块中有以下路由: { path: 'collection', component: CollectionPageComponent }, 并在搜索组件中使用以
我已经使用路由器链接在我的网络应用程序中添加了页面导航,出于某种原因,该页面大部分时间只是重新加载,而在其他时候它工作正常,非常随机。 我很困惑,尤其是为什么它会随机工作。任何见解都会有所帮助。 相关
我从 Vue.js 中的 VueRouter 开始,我遇到了这个错误: [Vue warn]: $attrs is readonly. found in ---> at resources\
我只想在一条路线上删除一个类(class),(或者在所有但只有一条路线上添加一个类(class)。)这怎么可能?我已经尝试使用多个参数的 [routerLink] 无济于事:
我正在制作一个电子商务网站,我的目标是每个对象有多个输入点,例如,他们单击/点击卡片上除按钮以外的任何地方,它将在单击/时转到产品详细信息/点击按钮会将该项目添加到购物车。 目前我转发到详情没有问题,
我想要一种更好的方式来编写这些代码行。 1" class="page-item"> First 1)" class="page-item disabled"> First
我是一名优秀的程序员,十分优秀!