コンポーネントのhmtlコードがangular2で動作しない

Question

実際には最初の角型アプリケーションを作成しています。たとえば、メニューのようなコンポーネントを作成すると、material.angular.ioからメニューのhtmlコードがコピーされ、そして、私はルートコンポーネントにメニューコンポーネントを含めるが、表示されるのは「メニューが動作する！」だ。どういう意味ですか、どうすればこの問題を解決できますか？ありがとうございました:)ここ

は私のコードです：

menu.component.htmlファイル：

<button md-button [mdMenuTriggerFor]="menu">Menu</button> 
<md-menu #menu="mdMenu"> 
    <button md-menu-item>Item 1</button> 
    <button md-menu-item>Item 2</button> 
</md-menu> 

menu.component.tsファイル：

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

@Component({ 
    selector: 'app-menu', 
    templateUrl: './menu.component.html', 
    styleUrls: ['./menu.component.css'] 
}) 
export class MenuComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
} 

} 

app.component .htmlファイル：

<app-menu></app-menu> 

app.component.htmlファイル：

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works'; 
} 

app.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; 
import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 

import 'hammerjs'; 
import { NavBarComponent } from './components/nav-bar/nav-bar.component'; 
import { SidenavComponent } from './components/sidenav/sidenav.component'; 
import { MenuComponent } from './components/menu/menu.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    NavBarComponent, 
    SidenavComponent, 
    MenuComponent, 


    ], 
imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    NoopAnimationsModule, 
    MdButtonModule, MdCheckboxModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

1）あなたは含まなければなりませんMdMenuModuleまたはMaterialModuleを使用して、すべてのangle2マテリアルを取得します。

上記のようにapp.module.tsを使用してください。予想通り

すべての作品

<button md-button >Menu</button> 
    <md-menu #menu="mdMenu"> 
    <button md-menu-item>Item 1</button> 
    <button md-menu-item>Item 2</button> 
    </md-menu> 

teset：

2）あなたはそうと同じように、あなたのmenu.component.htmlを変更し、私はそれらを持っていない、サードパーティ製のプラグインを使用し、それらを削除しました。 私はそれらを持っていないので、[mdMenuTriggerFor] = "menu"とNavBarComponent、 SidenavComponentを削除しました。

Answer 2

だからこのApp.Module.ts試してみてください。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; 
import {MaterialModule} from '@angular/material'; 

import 'hammerjs'; 
import { NavBarComponent } from './components/nav-bar/nav-bar.component'; 
import { SidenavComponent } from './components/sidenav/sidenav.component'; 
import { MenuComponent } from './components/menu/menu.component'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavBarComponent, 
     SidenavComponent, 
     MenuComponent, 
     ], 
imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    NoopAnimationsModule, 
    MaterialModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
    }) 
    export class AppModule { }