Toolbar Komponente mit angular2-Material

Question

Ich bin neu in angular2-Material und ein bisschen verwirrt :)

Ich möchte die Toolbar Komponente von angular2-Material verwenden.

bisher installierten i npm folgenden Paketen mit: jetzt

<md-toolbar [color]="primary"> 
<span>My Application Title</span> 
</md-toolbar> 

und das i definieren meine Komponente Typoskript mit:

"@angular2-material/core": "^2.0.0-alpha.3" 
"@angular2-material/toolbar": "^2.0.0-alpha.3" 

und meine Anwendungsdatei die folgende enthält

@Component({ 
selector: 'app', 
templateUrl: 'client/app.html' 
}) 

Jetzt weiß ich, dass ich irgendwie die Toolbar-Komponente, die ich installiert habe, enthalten muss und fügen Sie es einer neuen Direktiven-Eigenschaft in @Component Decorator hinzu. aber ich kann keine Beispiele finden, wie das geht.

alles finde ich ist NG2-Material Beispiele bei https://justindujardin.github.io/ng2-material/

für jetzt .. habe ich NG2-Material verwenden? Installieren Sie den Kern des eckigen2-Materials und die Symbolleiste ist nicht genug?

Wenn ich ng2-material installiere, muss ich die angular2-material Kern- und Toolbar-Komponenten entfernen? arbeiten sie zusammen?

Informationen über das Problem würden sehr geschätzt werden.

Answer 1

Die Material2 GitHub Repo enthält eine Demo-Anwendung https://github.com/angular/material2/blob/master/src/demo-app/toolbar/toolbar-demo.html

<md-toolbar> 
    <i class="material-icons demo-toolbar-icon">menu</i> 
    <span>Default Toolbar</span> 

    <span class="demo-fill-remaining"></span> 

    <i class="material-icons">code</i> 
</md-toolbar> 

import {Component} from 'angular2/core'; 
import {MdToolbar} from '../../components/toolbar/toolbar'; 

@Component({ 
    selector: 'toolbar-demo', 
    templateUrl: 'demo-app/toolbar/toolbar-demo.html', 
    styleUrls: ['demo-app/toolbar/toolbar-demo.css'], 
    directives: [MdToolbar] 
}) 
export class ToolbarDemo { 

} 

Answer 2

Sie benötigen SystemJS mit NG2-Material zu konfigurieren, nur die Bibliothek zur Installation von NPM ist nicht genug.

<script> 
    System.config({ 
    defaultJSExtensions: true, 
    packages: { 
     app: { 
     format: 'register', 
     defaultExtension: false 
     } 
    }, 
    map: { 
     'ng2-material': 'node_modules/ng2-material' 
    } 
    }); 
</script> 

Dann können Sie entsprechende Komponenten in Ihre Module importieren.

import {MdToolbar} from "ng2-material/components/toolbar/toolbar"; 

@Component({ 
    selector: 'app', 
    templateUrl: 'client/app.html' 
    directives: [ MdToolbar ] 
}) 
export class SomeComponent { 
} 

Vergessen Sie nicht, die entsprechende Klasse in das directives Attribut Ihrer Komponente.

Sehen Sie diese Frage für zusätzliche Hinweise:

• Angular2 + ng2-material import

Einige Proben von Symbolleiste auf der Demo-Website der Bibliothek zur Verfügung stehen (klicken Sie einfach auf „<>“, um den Quellcode zu sehen):

• https://justindujardin.github.io/ng2-material/#/components/toolbar