41

我有一个混合的 Angular1 和 Angular2 应用程序。在我路由到的 Angular2 组件之一中，我想使用 Material Design Button。

当我像这样在模板中插入一个按钮时<md-button>foo</md-button>，应用程序开始崩溃并显示此控制台消息

Error: Template parse errors:
'md-button' is not a known element:
1. If 'md-button' is an Angular component, then verify that it is part of this module.
2. If 'md-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<h1>Job</h1>[ERROR ->]<md-button>material</md-button>"): JobComponent@0:12
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)

所以，这听起来像是消息中的第一种情况，但我已经尝试过在这个答案中给出的建议添加MdButton到importsmy 的属性NgModule（它已经包含在文档MaterialModule.forRoot()中的建议中），但如果我这样做了，整个应用程序在控制台中没有错误的情况下变为空白。

这是一些相关的代码

import { UIRouterModule } from "ui-router-ng2";
import { Ng1ToNg2Module, uiRouterNgUpgrade } from "ui-router-ng1-to-ng2";

import { MaterialModule, MdButton } from '@angular/material';


const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(
    forwardRef(() => XamFlowNg2Module));

uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);

angular.module("xamFlow")
    .factory("consoleService",
    upgradeAdapter.downgradeNg2Provider(ConsoleService));


/*
 * Expose our ng1 content to ng2
 */
upgradeAdapter.upgradeNg1Provider("restService");

@NgModule({
    declarations: [
        JobComponent,
    ],
    entryComponents: [
        // Components that are routed to must be listed here, otherwise you'll get "No Component Factory"
        JobComponent,
    ],
    imports: [
        CommonModule,
        BrowserModule,
        FormsModule,
        HttpModule,
        Ng1ToNg2Module,
        MaterialModule.forRoot()
    ],
    providers: [
        ConsoleService,
        ImageService
    ]
})
class MyModule { }


upgradeAdapter.bootstrap(document.body, ["myApp"]);
4

2 回答 2

62

它应该是

<button md-button>foo</button>

或者

<button md-raised-button>foo</button>
于 2016-10-22T18:23:44.390 回答
-1

有时，当您向 angular2 添加新组件时，它不会直接注册标签，在这种情况下您必须做两件事：

转到 app.component.ts 文件

  • 1）在“import {component}”中手动插入要添加的按钮
  • 2) 在@Component 中注册你的组件并给出路径
于 2016-10-22T18:29:52.250 回答