Question

我有一个简单的应用程序，其中包含一些延迟加载的模块和一个共享模块。我将导航栏放在共享模块中，并用* ngFor生成导航链接，形成一个包含对象的数组，该对象包含两个属性-标题和routerLink。所有nav元素正确显示，标题也正确生成，但是routerLink指令似乎总是生成空的href =“＃”。我已经将RouterModule导入了我的共享模块中，并且我确定输入了正确的路由URL，因为可以手动打开它们。另外-我没有任何控制台错误。

我尝试过在数组内部定义链接，如下所示：['/ link1']，还尝试将其硬编码到html模板中，而不是使用绑定，但结果是相同的。我还尝试了将延迟加载的模块直接移动到主应用程序模块，而没有任何延迟加载，但是结果是相同的。

我以这种方式使用routerLink指令：

    <li class="nav-item" *ngFor="let item of menuItems">
        <a class="nav-link" [routerLink]="item.routerLink">{{ item.title }}</a>
    </li>

menuItems对象看起来像这样：

    menuItems = [
        { title: 'Title1', routerLink: '/link1' },
        { title: 'Title2', routerLink: '/link2' }
    ]

我希望会生成像这样的hrefs href =“ / link1”，但它们都是href =“＃”

编辑：正确的解决方法是[routerLink] =“ item.routerLink”

Answer 1

尝试一下：

 <li class="nav-item" *ngFor="let item of menu">
     <a class="nav-link" href="#" [routerLink]="[item.link]">{{item.title}}</a>
 </li>

与此类似的还有post。

为什么routerLink指令在我的Angular 7应用程序上生成空的href =“＃”？

1 个答案: