如何在角度 6 中使用制表符? [英] How to use tab in angular 6?

问题描述

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

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

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

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

解决方案

这里是用 angular 4+ 和 angular material library (version 2) 编写的通用选项卡示例:

tabs.html:

<a mat-tab-link class="tab"*ngFor="让路由链接的链接"[routerLink]="link.link"[active]="activeLinkIndex == link.index">{{link.label}}</a></nav>

tabs.ts:

 import { Component, OnInit } from '@angular/core';从@angular/router"导入{路由器}；@成分({选择器:'标签'，templateUrl : './tabs.component.html',styleUrls : ['./tabs.component.scss']})导出类 TabsComponent 实现 OnInit {路由链接:任何[]；activeLinkIndex = -1;构造函数(专用路由器:路由器){this.routeLinks = [{标签:'标签1'，链接:'./tab-1-link',指数:0},{标签:'标签2'，链接:'./tab-2-link',指数:1},{标签:'标签3'，链接:'./tab-3-link',指数:2}];}ngOnInit() {this.activeLinkIndex = this._markingTabLogic(this.router);this.router.events.subscribe((res) => {//有点通用的url匹配//this.activeLinkIndex =this.routeLinks.indexOf(this.routeLinks.find(tab => tab.link === '.' + this.router.url));//更细粒度的匹配this.activeLinkIndex = this._markingTabLogic(this.router);});}_markingTabLogic(路由器){if(router.url.indexOf('tab-3-link') > -1){返回2；}否则 if(router.url.indexOf('tab-2-link') > -1){返回 1；}返回0；}}

也不要忘记在你的组件模块(你的标签组件的模块)中导入角度材料:

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从@angular/router"导入{ RouterModule}；从@angular/material/tabs"导入 {MatTabsModule}；从./tabs/tabs.component"导入{TabsComponent}；@NgModule({进口:[CommonModule,RouterModule,MatTabsModule]声明:[TabsComponent]})导出类 ComponentsModule { }

如果您需要教程 - 请检查:https://www.nikhildevre.com/creating-tabs-using-angular-material-5-and-angular-5-routing/

I am trying to create a tab in angular 6 but when the app first loads all the tabs are visible and the links do not work.

<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>

解决方案

Here is a generic tabs example written in angular 4+ and angular material library (version 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>

tabs.ts:

    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;
      }

    }

also don't forget to import angular material in your components module (the module of your tabs component):

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 { }

If you need a tutorial - check this: https://www.nikhildevre.com/creating-tabs-using-angular-material-5-and-angular-5-routing/

这篇关于如何在角度 6 中使用制表符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！