Angular如何重定向到选项卡

Question

我有一个有 5 个标签的页面。还有另一个页面包含指向这些选项卡的链接。每当用户单击此页面上的链接时，应在 Angular 应用程序页面上打开相应的选项卡。

当用户手动单击选项卡时，该选项卡工作正常，但我无法找到默认情况下如何选择选项卡。

在 app.js 中添加：

$routeProvider.when('/trend', {
    templateUrl:'partials/trend.html'
}).when('/deepdive', {
    templateUrl:'partials/deepdive.html'
}).when('/driversNdrainers', {
    templateUrl:'partials/DriversNDrainers.html'
}).when('/timeline', {
    templateUrl:'partials/timeline.html'
}).otherwise("/trend");

索引页面：

<div header></div>
<div class="row">    
<div class = "col-md-12" ng-include="'partials/home.html'"></div> 
</div>
<div footer></div>

家庭控制器动态创建选项卡。 主页.html

<div class="" fade-in ng-controller="HomeCtrl">
<ul class="nav nav-pills">
  <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}"  id="{{tab.id}}"
  ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>
<div ng-view></div>`enter code here`

控制器：

var homectrl = myApp.controller('HomeCtrl', ['$scope', '$routeParams', '$location','$state', function ($scope, $routeParams,$location,$state) { $scope.tabs = [ {链接：'#/趋势'，标签：'趋势'，id：“趋势链接”}， {链接：'#/deepdive'，标签：'Deep Dive'，id：“deepdriveLink”}， { 链接：'#/driversNdrainers'，标签：'Drivers & Drainers'，id：“ddLink”}， { link : '#/timeline', label : 'Timeline' , id: "timelineLink"}, { 链接：'#/zoomin'，标签：'放大'，id：“zoominLink”} ];

$scope.selectedTab = $scope.tabs[0];    

$scope.setSelectedTab = function(tab) {
    $scope.selectedTab = tab;
};

$scope.tabClass = function(tab) {
    return $scope.selectedTab == tab? "active": "";
};
angular.element(document).ready(function () {
   $.each($scope.tabs,function(i){
    if(this.link==location.hash){
        $scope.setSelectedTab(this);
        //$state.go("/trend");
        return;
    } 
});
});

}]);

我在这里看到的是选项卡已被选中，但选项卡内的内容未加载。

Answer 1

这里是解决方案你可以参考stackblitz

我必须对其功能进行一些修改才能达到我的要求。

修改方案：

moveToSelectedTab(tabName: string) {

for (let i = 0; i < document.querySelectorAll('[aria-selected]').length; i++) {
  let element = document.querySelectorAll('[aria-selected="false"]')[i];
  if (element != undefined) {
    if ((<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).innerHTML == tabName) {
      (<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).click();
      
    }
  }
}}  

HTML

<ul class="nav nav-tabs" id="editorTab" role="tablist">
  <li class="nav-item active" role="presentation">
    <a class="nav-link active" id="bannerArea-tab" data-toggle="tab" href="#bannerArea" role="tab"
       aria-controls="bannerArea" aria-selected="true">General Information</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="cardArea-tab" data-toggle="tab" href="#cardArea" role="tab"
       aria-controls="cardArea" aria-selected="false">Banner Content</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="mainArea-tab" data-toggle="tab" href="#mainArea" role="tab"
       aria-controls="mainArea" aria-selected="false">Main Content</a>
  </li>
</ul>
<div class="tab-content" id="editorTabContent">
  <div class="tab-pane fade show active col-sm-12" id="bannerArea" role="tabpanel" aria-labelledby="bannerArea-tab">
     <div class="form-group">
      
    </div>
    <div class="text-right margin-top-xl">
     
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('Banner Content')">Next<i class="material-icons">arrow_forward</i></button>
    </div>
  </div>
  <div class="tab-pane fade show active col-sm-12" id="cardArea" role="tabpanel" aria-labelledby="cardArea-tab">
    <div class="form-group">
      
    </div>
    
    <div class="text-right margin-top-xl">
     
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('Main Content')">Next<i class="material-icons">arrow_forward</i></button>
    </div>
  </div>
  <div class="tab-pane fade col-sm-12" id="mainArea" role="tabpanel" aria-labelledby="mainArea-tab">
    
    <div class="text-right margin-top-xl">
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('General Information')"><i class="material-icons">check</i></button>
    </div>
  </div>
</div>

Answer 2

您在 jQuery 中的代码不会在 Angular 的摘要循环中执行。尝试在$scope.setSelectedTab(this); 之后添加$scope.$apply();

要了解为什么要这样做，请阅读：https://docs.angularjs.org/guide/scope 上的“范围生命周期”