Html 如何在angular 6中使用tab？

我试图在angular 6中创建一个选项卡，但当应用程序首次加载时，所有选项卡都可见，链接不起作用

<div ng-init="tab=1">
    <div class="cb" ng-click="tab = 1">
      <a [routerLink]='["/search"]' (click)='collapse()'>
        <span class='glyphicon glyphicon-search'></span> Search
      </a>
    </div>

    <div class="cb" ng-click="tab = 2">
      <a [routerLink]='["/"]' (click)='collapse()'>
        <span class='glyphicon glyphicon-home'></span> Home
      </a>
    </div>

    <div ng-show="tab == 1">
      <app-search-component></app-search-component>
    </div>

    <div ng-show="tab == 2">
      <p>secondb</p>
    </div>
  </div>

搜寻
家
第二

以下是在angular 4+和angular material library（版本2）中编写的通用选项卡示例：

tabs.html：

<nav mat-tab-nav-bar class="tabs">
  <a mat-tab-link  class="tab"
     *ngFor="let link of routeLinks"
     [routerLink]="link.link"
     [active]="activeLinkIndex == link.index"
     >
    {{link.label}}
  </a>
</nav>

另外，不要忘记在组件模块（选项卡组件的模块）中导入角度材质：

如果需要教程-请检查以下内容：

---

看起来您正在尝试在AngularJS（6）中使用AngularJS（1）内容。在查找参考资料时请注意这一点。@Ry-谢谢，我一直在研究如何在angular 6中制作制表符，但我还没有遇到一个制表符，如果有人有angular 6教程的链接，我将不胜感激。我已经尝试过了，但我发现这个错误

无法绑定到'active'，因为它不是'a'的已知属性。

谷歌搜索它，他们说要导入路由器，但它已经从你拥有的东西中导入了。你使用的是什么angular版本？另外，我已经编辑了答案，包括angular材质选项卡。我正在使用Angular 6。我发现编辑中缺少“]，”，我是框架新手，无法使选项卡显示为可见，如果您知道Angular 6中关于选项卡的任何有用教程，将不胜感激。我尝试过的每一件事，从我在实现选项卡时了解到的框架到我正在退出的项目，我得到了一个404

错误，无法获得

    import { Component, OnInit } from '@angular/core';

    import { Router } from '@angular/router';


    @Component({
      selector    : 'tabs',
      templateUrl : './tabs.component.html',
      styleUrls   : ['./tabs.component.scss']
    })
    export class TabsComponent implements OnInit {

      routeLinks: any[];
      activeLinkIndex = -1;

      constructor(
        private router : Router
      ){
        this.routeLinks = [
          {
            label  : 'Tab 1',
            link   : './tab-1-link',
            index  : 0
          },
          {
             label  : 'Tab 2',
            link   : './tab-2-link',
            index  : 1
          },
          {
              label  : 'Tab 3',
            link   : './tab-3-link',
            index  : 2
          }
        ];
      }

      ngOnInit() {
        this.activeLinkIndex = this._markingTabLogic(this.router);

        this.router.events.subscribe((res) => {
//A bit generic url matching
//this.activeLinkIndex =this.routeLinks.indexOf(this.routeLinks.find(tab => tab.link === '.' + this.router.url));

//A more fine grain matching
          this.activeLinkIndex = this._markingTabLogic(this.router);
        });
      }

      _markingTabLogic(router){
        if(router.url.indexOf('tab-3-link') > -1){
          return 2;
        }
        else if(router.url.indexOf('tab-2-link') > -1){
          return 1;
        }
        return 0;
      }

    }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import {MatTabsModule}    from '@angular/material/tabs';
import {TabsComponent} from "./tabs/tabs.component";

@NgModule({
  imports: [
    CommonModule,RouterModule,MatTabsModule]
  declarations: [TabsComponent]
})
export class ComponentsModule { }