dynamiquement créé le modèle de composant matériel angulaire rend à la case pseudo indépendamment md de ce qui est mon modèle

Question

Hy,

je créer le site web à l'aide 4. angulaire je tente de créer le composant lors de l'exécution. Le composant a des étiquettes de matériau angulaire dans la chaîne, mais seul le md-pseudo-checkbox est rendu indépendamment des balises que j'utilise. Je ne comprends pas pourquoi exactement celui-ci est rendu. composant matériel que j'essaie de se compiler est dans les a.component.ts Par ailleurs, une chose à l'importation est que si je retire imports:[MaterialModule] de a.component.ts alors dit console

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 

Donc, cela signifie-t-il qu'il n'est pas possible de créer dynamiquement des composants de matériaux angulaires?

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] 


}) 

about.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 { 



    } 




} 

about.component.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": {} 
} 

Answer 1

Ajouter le MdCardModule à votre entrée pointez dans ce cas l'app.module.ts

app.module.ts

import {MdCardModule} from "@angular/material"; 

@NgModule({ 
    imports: [MdCardModule] 
}) 

Ensuite, vous pouvez utiliser le composant de la carte matérielle comme dans les AngularMaterial Doku