HTML 组件代码在 angular2 中不起作用

Question

我实际上正在构建我的第一个 angular 应用程序，当我创建一个像菜单这样的组件时，我从 material.angular.io 复制粘贴菜单的 html 代码，然后我将菜单组件包含在根组件中，但我所显示的只是 "Menu works!"。请问这是什么意思，我该如何解决这个问题。非常感谢:)

这是我的代码：

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

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

2) 您使用了第 3 方插件，我没有并删除了它们，所以只需将您的 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>

测试

一切正常。请注意，我删除了 [mdMenuTriggerFor]="menu" 和 NavBarComponent， SidenavComponent，因为我没有。

HTML 组件代码在 angular2 中不起作用

HTML code of component doesn't work in angular2

material-design

angular-material

angular2-directives

angular-components

angular