给你...
我做了以下更改 -
1. app.component.html
<p>
Start editing to see some magic happen :)
</p>
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">Page1</a>
<ul class="dropdown-menu">
<li><a href="#">Page1.1</a></li>
<li><a href="#">Page1.2</a></li>
<li><a href="#">Page1.3</a></li>
</ul>
</li>
<li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>
2。 app.module.ts
我添加了一个指令来监听下拉菜单的点击事件并在 app.module.ts 中导入相同的指令
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { DropdownDirective } from './dropdown.directive';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, DropdownDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
3. dropdown.directive.ts
添加了监听点击事件的指令
import { Directive, HostListener, ElementRef, Renderer2 } from "@angular/core";
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
manageDropdown : boolean = false;
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
}
@HostListener('click') openDropdown(eventData: Event) {
if(!this.manageDropdown) {
this.renderer.addClass(this.elementRef.nativeElement,'open');
this.manageDropdown = !this.manageDropdown;
} else {
this.renderer.removeClass(this.elementRef.nativeElement, 'open');
this.manageDropdown = !this.manageDropdown;
}
}
}
4. angular.json
要求您执行“npm install --save bootstrap@3”并在 angular.json 文件中进行以下更改。
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
注意 - 供您参考，请访问reference 链接。您可以查看下拉演示。