为什么在Angular2中必须使用routerLink?

时间:2016-05-31 15:45:33

标签: angular angular2-routing

Angular的忠实粉丝,我遵循Angular2关于路由的官方文档(https://angular.io/docs/ts/latest/guide/router.html)来构建我的第一个测试应用程序并陷入以下难以理解的行为。

AppComponent中的模板部分如下所示:

function replace_text_wp($the_content){  
    //Break up the content into parts - allowing us to just edit content and not tags
    $parts = preg_split('/(<(?:[^"\'>]|"[^"<]*"|\'[^\'<]*\')*>)/', $the_content, -1, PREG_SPLIT_DELIM_CAPTURE);
    // Loop through the blocks and just edit the content
    for ($i=0, $n=count($parts); $i<$n; $i+=2) {
      // Check if any of our keywords are within the content
        // If so then make the keywords a link
        $parts[$i] = str_replace('keyword1', '<a href="http://demo.com/" rel="bookmark" title="keyword1">keyword1</a>', $parts[$i]);
      }
    }
    // Now put it all back together
    $the_content = implode('', $parts);
    return $the_content;
}

有效。我可以通过直接在我的浏览器中输入网址或点击routerLink指令生成的已定义链接来访问/危机中心或/英雄。

现在,我不想再显示导航菜单了,但是我希望我的应用程序通过直接在浏览器栏中输入网址导航到/ crisis-center或/ heroes,所以我删除了导航块和我的模板现在看起来像:

template: `


<h1>Component Router</h1>
  <nav>
    <a [routerLink]="['/crisis-center']">Crisis Center</a>
    <a [routerLink]="['/heroes']">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
`,

但是,此新版本不显示组件特定内容,仅显示父模板部分 注意:当只保留一个routerLink指令时,可以导航到组件英雄和危机中心。

我找到的唯一解决方法是在我的导航标签上应用display:none。

为什么指令 routerLink 必须使路由工作?对我来说,它只是一个生成网址的指令,不会影响路由过程......

1 个答案:

答案 0 :(得分:2)

这是一个已知问题。您也可以将路由器注入根组件

export class AppComponent {
  constructor(router Router){}
}

如果没有这些解决方法之一,路由器就不会被实例化,因此不会做任何事情。