Question

我实际上构建了我的第一个角度应用程序，当我创建一个像Menu这样的组件时，我从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

所以试试这个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 { }

Answer 2

1）你必须为angular2材料的所有内容包括MdMenuModule或MaterialModule。

所以请使用我在上面发布的app.module.ts。

2）您使用了第三方插件，我没有删除它们，所以只需将menu.component.html修改为：

<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

一切都按预期工作。请注意，我删除了[mdMenuTriggerFor] =＆＃34; menu＆＃34;和NavBarComponent， SidenavComponent，因为我没有它们。

组件的hmtl代码在angular2中不起作用

2 个答案: