更改菜单项的网址会产生一个错误。

Posted 2021-03-19

我有一个逻辑，一个组件可以改变布局的导航菜单项。

我有一个默认布局的组件。

export class DefaultLayoutComponent {
    public sidebarMinimized = false;
    public navItems = navItems; //default values imported from _nav.ts

    constructor(private cdRef: ChangeDetectorRef) {

    }

    headerText: string = "Default Text";
    headerVisible: boolean = true;

    public setHeaderVisible(visible: boolean): void {
        this.headerVisible = visible;
    }

    public setHeaderText(text: string): void {
         this.headerText = text;
    }

    public setNavItems(key: string): void {
        if (key == 'SPACE') {
            this.navItems = spaceDetailsNavItems;
        }
    }

    public setNavItemUrlArgs(itemKey: string, paramKey: string, paramValue: string): void {
         const _navItems = <ICustomNavData[]>this.navItems;
         const menuItem = _navItems.find(r => r.key == itemKey);
         if (menuItem) {
             var url = menuItem.url.toString();
             url = url.replace(paramKey, paramValue);
             menuItem.url = url;
         }
    }


    ngAfterViewChecked() {
        this.cdRef.detectChanges();
    }
}

setNavItems 切换当前的菜单项，在本例中，换成另一个项目数组，也是导入自 _nav.ts.

这是一个试图改变菜单项的组件。我注入了 DefaultLayoutComponent 中。

export class SpaceDetailsComponent implements OnInit {

    /** space-details ctor */
    constructor(private route: ActivatedRoute,
        private spaceService: SpaceService,
        private defaultLayout: DefaultLayoutComponent) {
    }

    ngOnInit(): void {
        this.defaultLayout.setNavItems('SPACE'); //fails here....
        this.defaultLayout.setHeaderText('Details');
    }
}

上面的工作，我确实得到了菜单项的变化，但我也得到了以下错误。

ERROR TypeError.Cannot read property 'length' of undefined at createUrlTree (router.js:1902) at the same time: 在createUrlTree (router.js:1902) at [e-mail] (router.js:4220) at [e-mail] (coreui-angular.js:1317) at checkAndUpdateDirectiveInline (core. js:22585) at checkAndUpdateNodeInline (core.js:31254) at checkAndUpdateNode (core.js:31216) at debugCheckAndUpdateNode (core.js:31850) at debugCheckDirectivesFn (core. 在Object.eval [as updateDirectives] (AppSidebarNavItemsComponent.html:33) at Object.debugUpdateDirectives [as updateDirectives] (core.js:31802)

不过这似乎更多的是模板（CoreUI）的错误，而不是Angular。