您可以添加,做它的自定义指令您
import { Directive, ElementRef, Input, HostListener } from "@angular/core";
@Directive({
selector: "[menuClose]"
})
export class CloseMenuDirective {
@Input()
public menu: any;
constructor(private element: ElementRef) { }
@HostListener("click")
private onClick() {
this.menu.classList.remove("show");
}
}
不要忘了这个声明数组添加到您的app.module
import { CloseMenuDirective } from './directives/close-menu.directive';
@NgModule({
declarations: [
...declarations,
CloseMenuDirective
]
})
export class AppModule { }
然后在你的HTML中,你创建了一个对你的菜单的引用,并将它传递给你的链接元素。
<div class="page-layout">
<!-- Mark the menu with #menu, thus creating a reference to it -->
<aside class="collapse navbar-toggleable page-menu" id="navbar-header" #menu>
<ul class="nav">
<li class="nav-item">
<a class="nav-link"
[routerLink]="['./somewhere']"
routerLinkActive="active"
menuClose <!-- Our custom directive above -->
[menu]="menu"> <!-- Bind to menu -->
<span>My Link</span>
</a>
</li>
</ul>
</aside>
</div>
不为我工作 – amirsa00
它是如何不工作?如果您对帮助感兴趣,则需要指定详细信息。你有错误吗? – Patrick
我认为原因是我使用bootstap 3.3.7,没有'show'类的navbar;这是'在' – amirsa00