使用Angular2材质创建标签

我想用Angular2创建垂直标签我读过这里有一种方法可以使用Angular Material 那么我需要如何将材质安装到我现有的应用程序中，以及如何创建一个带有该标签的标签一个组件？使用Angular2材质创建标签

var isPublic = typeof window != "undefined"; 

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': (isPublic) ? '/' : 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'client', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs':      'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
      'angular2-jwt':    'npm:angular2-jwt/angular2-jwt.js', 
      'ng-semantic':    'npm:ng-semantic' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'ng-semantic': { 
       main: 'ng-semantic', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this);

来源

2016-10-03 Tony

您的意思是如何安装材料npm包？根据他们的网站其

npm install --save @angular/material

那么明显app.module.ts运行npm install

使用该模块：

import { MaterialModule } from '@angular/material'; 
// other imports 
@NgModule({ 
    imports: [MaterialModule.forRoot()], 
    ... 
}) 
export class AppModule { }

然后还有使用导航演示应用程序。我不打算在这里发布的所有代码，因为它是很多代码，尽管我知道这很可能是最好的，因为链路可以改变...

Materia Github demo app

但还有其他几种解决方案在那里为好，如angular2-tabs似乎很简单：

npm install angular2-tabs --save

HTML：

<an-tablist #list="anTabList" anListClass="diff-class"></an-tablist> 
<an-tabs [anList]="list"> 
    <div *anTabDefault="tabOne"> 
     The Contents of Tab one 
     <div anNextTab="hello">Next</div> 
    </div> 
    <div *anTab="'hello'"> 
     The Contents of Tab Two 
     <div [anNextTab]="tabOne"></div> 
    </div> 
</an-tabs>

控制器：

import {ANGULAR_TABS_DIRECTIVES, TabInterface} from "angular2-tabs/core"; 

@Component({ 
    ... 
    directives: [ANGULAR_TABS_DIRECTIVES] 
}) 
export class IndexComponent { 
    tabOne: TabInterface = {id: "test", title: 'test Title', canActivate:() => {return true;}} 
}

另一种解决方案： Plunker

来源

2016-10-27 10:24:24 Alex

使用Angular2材质创建标签

回答

相关问题