Question

如何使用角度2（rc-5）进行路由路由， enter image description here

app.html

<nav>
  <a routerLink="/developers" routerLinkActive="active">Developers</a>
  <a routerLink="/customers" routerLinkActive="active">Customers</a>
</nav>
<div class="container">
  <div class="row">
    <router-outlet></router-outlet>
  </div>

和 developer.html
**** **代码

<a routerLink="/link1">link1</a>
<a routerLink="/link2" routerLinkActive="active">link2</a>
<router-outlet></router-outlet>

这两个链接（link1和link2）重定向到主路由器outleet的问题

Answer 1

您必须为第二个节点 router-outlet

指定其他名称

<强> // developer.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
    <div class="panel-group driving-license-settings" id="accordion-{{$index}}">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion-{{$index}}"
                       data-target="#collapseOne-{{$index}}">
                        <input type="checkbox" class="ui-checkbox" id="chk1-{{$index}}" value="">
                        <label for="chk1-{{$index}}">{{item}}</label>
                    </a>
                </h4>
            </div>
            <div id="collapseOne-{{$index}}" class="panel-collapse collapse ">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-1" value="">
                            <label for="chk2-cb-{{item}}-1">A</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-2" value="">
                            <label for="chk2-cb-{{item}}-2">B</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-3" value="">
                            <label for="chk2-cb-{{item}}-3">C</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-4" value="">
                            <label for="chk2-cb-{{item}}-4">D</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-5" value="">
                            <label for="chk2-cb-{{item}}-5">E</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

在路由配置中包含<a routerLink="/link1">link1</a> <a routerLink="/link2" routerLinkActive="active">link2</a> <router-outlet name="auxPathName"></router-outlet>

此处介绍如何添加多个路由器插座节点： https://stackoverflow.com/a/34642273/896258

这是我的工作示例（Angular2 RC5，路由器3-rc1）仅一个路由器 - 出口节点。

HTML文件

auxPathName

app.routing文件

  <ul>
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events">All Events</a></li>
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events/news">News</a></li>
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events/family">Family Events</a></li>
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events/wedding">Wedding Events</a></li>
  </ul>
</div>

路由角度路由2

1 个答案: