使用角度材质的动态嵌套导航

Question

我创建了要渲染的JSON路由数据。 数据是这样的：

const navItems: NavItem[] = [
{
    displayName: 'Dashboard',
    disabled: true,
    children: [
        {
            displayName: 'Dashboard',
            disabled: false,
            route: '/dashboard/dashboard'
        },
        {
            displayName: 'Wizzard',
            disabled: false,
            route: '/dashboard/wizzard'
        },

        {
            displayName: 'Dynamic Form',
            disabled: false,
            route: '/dashboard/onboarding'

        }
    ]
},
{
    displayName: 'Admin',
    disabled: true,
    children: [
        {
            displayName: 'User',
            disabled: false,
            route: '/admin/user'
        },
        {
            displayName: 'Resource',
            disabled: false,
            route: '/admin/resource'
        },
        {
            displayName: 'Company',
            disabled: true,
            children: [
                {
                    displayName: 'HR',
                    disabled: false,
                    route: '/admin/company/hr'
                },
                {
                    displayName: 'Development',
                    disabled: false,
                    route: '/admin/company/development'
                },
                {
                    displayName: 'Testing',
                    disabled: false,
                    route: '/admin/company/testing'
                }
            ]
        },
    ]
},
{
    displayName: 'Settings',
    disabled: true,
    children: [
        {
            displayName: 'Password',
            disabled: false,
            route: '/setting/password'
        }
    ]
},
];

当我单击另一条父母路线时，另一条父母应该靠近。

我已经提到了这个 https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fmenu-list-item%2Fmenu-list-item.component.html

，但是当我单击另一个父路线时，它没有关闭。 请告诉我该怎么办。