检查动态数据是否正确传递给菜单组件,并确保使用ChangeDetectorRef触发变化检测。
示例代码:
在组件中声明变量并初始化:
menuItems: MenuItem[] = [ {name: 'Dashboard', link: '/dashboard'}, {name: 'Profile', link: '/profile'}, // add more items dynamically ];
在模板文件中绑定变量:
在组件中更新菜单项:
import { Component, ChangeDetectorRef } from '@angular/core'; import { MenuItem } from './menu-item.model';
@Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.css'] }) export class MenuComponent { menuItems: MenuItem[] = [ {name: 'Dashboard', link: '/dashboard'}, {name: 'Profile', link: '/profile'} ];
constructor(private cdr: ChangeDetectorRef) {}
addMenuItem(name: string, link: string) { this.menuItems.push({name, link}); this.cdr.detectChanges(); } }
在另一个组件中调用addMenuItem方法:
import { Component } from '@angular/core'; import { MenuComponent } from './menu/menu.component';
@Component({
selector: 'app-root',
template:
,
})
export class AppComponent {
constructor(private menu: MenuComponent) {}
addMenuItem() { this.menu.addMenuItem('New Item', '/new-item'); } }