>Hy，
我使用角度 4 创建网站。我尝试在运行时创建组件。该组件在字符串中具有角度材质标签，但无论我使用什么标签，都只能渲染md-pseudo-checkbox。我不明白为什么要渲染这个。 我尝试编译的材料组件在a.component.ts中 顺便说一句，一个导入的事情是，如果我从a.component.ts中删除imports:[MaterialModule]，那么控制台会说
Template parse errors:
'md-card-title' is not a known element:
1. If 'md-card-title' is an Angular component, then verify that it is part of this module.
2. If 'md-card-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message
那么，这是否意味着不可能动态创建角度材料组件？
app.module.ts：
@NgModule({
imports: [
TreeviewModule.forRoot(),
BrowserModule, FormsModule, HttpModule,
MaterialModule,
FlexLayoutModule,
RouterModule.forRoot([
{ path: '', component: aboutComponent, pathMatch: 'full' },
{ path: 'about', component: aboutComponent }
]
, { useHash: true }
),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps:[Http]
}
}),
Ng2FilterPipeModule,
LoadingModule.forRoot({
animationType: ANIMATION_TYPES.threeBounce,
backdropBackgroundColour: 'rgba(0,0,0,0.1)',
backdropBorderRadius: '4px',
primaryColour: '#0000ff',
secondaryColour: '#0000ff',
tertiaryColour: '#0000ff'
})
,
BusyModule
, BrowserAnimationsModule
,OTFModule
],
declarations: [AppComponent, DclWrapper, SanitizeDirective, aboutComponent, LibComponent, Menu, ReplacePipeComponent, OrderPipeComponent, aboutComponentLoader],
bootstrap: [AppComponent]
})
关于.component.ts：
import { Component, OnInit,ViewChild,ViewContainerRef,Compiler,Injector,NgModuleRef,AfterViewInit,NgModule} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../servizai/http.service.component';
import { Cookie } from 'ng2-cookies';
import { MaterialModule,MdCard,MdCardModule,MdCardContent } from "@angular/material";
import * as GLOBALUS from '../globalus/globalus';
import {Observable, Subscription } from 'rxjs';
import { List } from 'linqts';
import { MdMenuModule } from '@angular/material';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
templateUrl: '../../app/templates/about2.component.html',
selector: 'about',
providers: [HttpService],
styles: [`
.titel {text-transform: uppercase;
color: #00467f;
font-weight: bold;
font-size: 14px;
}
`]
})
export class aboutComponent implements OnInit {
public puslHTML: any;
public loading = false;
busy: Subscription;
constructor(private http: HttpService, private activatedRoute: ActivatedRoute, private _sanitizer: DomSanitizer,
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {
}
ngOnInit(): void {
}
}
关于组件.html：
<div class="my-container">
<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '10px' }"></ngx-loading>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-around start" fxLayoutGap="2%" style="background-color:#e8e8e8;padding:2%;">
<otf-a-component></otf-a-component>
</div>
a.component.ts：
import { Compiler, Component, Injector, NgModule, NgModuleRef, ViewChild, ViewContainerRef } from "@angular/core";
import { MaterialModule} from '@angular/material';
@Component({
moduleId: module.id,
selector: 'otf-a-component',
template: 'I am A component that inserts dynamic B component below: <div #vc></div>'
})
export class OTFAComponent {
@ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;
constructor(private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>) {
}
ngAfterViewInit() {
const template = `<md-card class="example-card">
<md-card-header>
<div md-card-avatar class="example-header-image"></div>
<md-card-title>Shiba Inu</md-card-title>
<md-card-subtitle>Dog Breed</md-card-subtitle>
</md-card-header>
<img md-card-image src="assets/img/examples/shiba2.jpg">
<md-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
<button md-button>SHARE</button>
</md-card-actions>
</md-card>`;
const tmpCmp = Component({ template: template })(class {
});
const tmpModule = NgModule({imports:[MaterialModule], declarations: [tmpCmp] })(class {
});
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, [], null, this._m);
cmpRef.instance.name = 'B component';
this._container.insert(cmpRef.hostView);
})
}
}
otf.module.ts：
import { NgModule } from "@angular/core";
import { OTFAComponent } from "./a.component";
@NgModule({
declarations: [OTFAComponent],
entryComponents: [OTFAComponent],
exports: [OTFAComponent]
})
export class OTFModule {
}
package.json：
{
"name": "bus-vgtub",
"version": "1.0.0",
"description": "BUS",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"postinstall": "typings install"
},
"keywords": [],
"author": "vgtub",
"license": "MIT",
"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/compiler-cli": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/flex-layout": "^2.0.0-beta.8",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3",
"@angular/platform-server": "^4.1.3",
"@angular/router": "^4.1.3",
"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "0.0.3",
"angular-in-memory-web-api": "~0.2.4",
"angular2-busy": "^2.0.4",
"core-js": "^2.4.1",
"ng-dynamic-component": "^1.0.8",
"ng-pipes": "^0.1.2",
"ng2-cookies": "^1.0.6",
"ng2-filter-pipe": "^0.1.10",
"ngx-loading": "^1.0.5",
"ngx-treeview": "0.0.5",
"rxjs": "^5.0.2",
"systemjs": "0.19.40",
"tslib": "^1.7.1",
"typescript": "^2.3.4",
"zone.js": "^0.8.11"
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/lodash": "^4.14.64",
"@types/node": "^6.0.46",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.2",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"delegated-events": "^1.0.2",
"extract-text-webpack-plugin": "^2.1.0",
"html": "^1.0.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"linqts": "^1.8.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"ng-dynamic": "^3.0.2",
"ngx-dynamic-template": "^2.1.24",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.0.10",
"typescript-collections": "^1.2.3",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^4.1.0"
},
"repository": {}
}
将 MdCardModule 添加到您的入口点，在本例中为 app.module.ts
app.module.ts
import {MdCardModule} from "@angular/material";
@NgModule({
imports: [MdCardModule]
})
之后，您可以使用材质卡组件，就像在AngularMaterial Doku中一样