Динамически загружать шаблон Angular 4, используя существующие компонент и модуль - PullRequest
Новая
       29

Динамически загружать шаблон Angular 4, используя существующие компонент и модуль

0 голосов
/ 24 мая 2018

Я пытаюсь загрузить шаблон HTML, полученный из серверной части.Этот шаблон включает в себя пользовательские каналы и должен содержать данные, полученные из другого веб-сервиса.Вот пример того, как он в настоящее время настроен. 

-app
-/person
--person.module.ts
--person.service.ts
--/person-info
---person-info.component.ts

В идеале, я хотел бы получить шаблон и настроить его в person-info.component.ts, так как у меня есть все необходимоекод для этого HTML в этом компоненте.Я начал следовать описанному здесь процессу https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e и придумал следующее:

person-info.component.ts 

import { JitCompilerFactory } from '@angular/compiler';

export function createJitCompiler() {
  return new JitCompilerFactory([{
    useDebug: false,
    useJit: true
  }]).createCompiler();
}

@Component({
  selector: 'person-info',
  template: `<div #vc></div>`,
  styleUrls: ['./person-info.component.css'],
  providers: [
    {provide: Compiler, useFactory: createJitCompiler},
  ]
})
export class PersinInfoComponent implements OnInit {

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
constructor(
  private route: ActivatedRoute,
  private router: Router,    
  private injector: Injector, 
  private moduleRef: NgModuleRef<any>,
  private compiler: Compiler
)
  ngAfterViewInit() {

this.personService.getPersonTemplate(this.id)
  .then(myTemplate => {  
     const tmpCmp = Component({template: myTemplate})(class{
      });
      const tmpModule = NgModule({declarations: [tmpCmp], imports: [CommonModule]})(class {
      });

      this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
        .then((factories) => {
          console.log('after compiler');
          const f = factories.componentFactories[0];
          const cmpRef = this.vc.createComponent(f);
          cmpRef.instance.name = 'dynamic';
          this.loadData(); // this method just loads data from service
      })
 })
}

издесь приведен фрагмент получаемого HTML-кода

person-info.component.html 

<div *ngIf="personDataList">
  <div class="panel panel-default">
    <table class="table customBackground results">
      <tr>
        <th>Add</th>
        <th>Full Name</th>
        <th>Id</th>
        <th>Relationship</th>
      </tr>
      <tr *ngFor="let personData of personDataList; let i = index" [class.disabled-background]="changeRowBackground(personData.id)" >
        <td class="form-group">
          <input [attr.disabled]="changeRowBackground(personData.id) ? true : null"  type="checkbox" name="checkbox" ([ngModel])="personData.add" (change)="onSelectAddBox(i)">
        </td>
        <td>{{personData.fullName}}</td>
        <td>{{personData.id}}</td>
        <td>{{personData.rltnType | keyLookup: relTypeList}}</td>
      </tr>
    </table>
  </div>
</div>

<form *ngIf="selectedPersonData" [formGroup]="personForm" (ngSubmit)="onSubmit()">
  <div class="row row-centered">
    <div class="col-md-3 col-centered">
      <label>Add Date</label><span class="required-text">*</span>
      <input  class="form-control" 
              type="text" 
              [formControl]="dateCtrl"
              [(ngModel)]="selectedPersonData.addDate"
              >
      <div *ngIf="dateCtrl.hasError('required') && dateCtrl.touched" class="alert alert-danger">
        Date is required
      </div>
      <div *ngIf="dateCtrl.hasError('errMsg')" class="alert alert-danger">
        {{dateCtrl.getError('errMsg')}}
      </div>           
    </div>
    <div class="col-md-3 col-centered">
      <label>Reason Code</label><span class="required-text">*</span>
       <select  class="form-control" 
                name="code"
                [formControl]="codeCtrl" 
                [(ngModel)]="selectedPersonData.code"
                >
        <option *ngFor="let currCode of codeList; let i = index" [ngValue]="currCode.key">{{currCode.value}}</option>
      </select>
      <div *ngIf="codeCtrl.hasError('required') && codeCtrl.touched" class="alert alert-danger">
        Code is required
      </div>
    </div>
  </div>
</form>
<p><span class="required-text">*</span>Indicates required field</p>
<span>
  <button type="button" class="btn btn-warning btn-sm" (click)="onCancel()">Cancel</button>
  <button type="submit" class="btn btn-success btn-sm" [disabled]="!personForm.valid || !selectedPersonData" (click)="onSubmit()">Submit</button>
</span>

К сожалению, при использовании этого метода у меня возникают проблемы.В основном с привязкой углового синтаксиса.Я получаю такие ошибки, как: 

Can't bind to 'formGroup' since it isn't a known property of 'form'
Can't bind to 'formControl' since it isn't a known property of 'input'

Я в настоящее время на Angular 4 

@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.2.5
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Общая цель того, что я пытаюсь сделать, - это иметь возможность отображать содержимое в соответствии с определенными ролями безопасности, которые пользователь может иметь .Из проведенного мною исследования это показалось лучшим подходом, но если для этой ситуации лучше использовать другой подход (даже если он используется в более новой версии Angular), дайте мне знать.

1 Ответ

0 голосов
/ 25 мая 2018

Вам просто нужно импортировать FormsModule и ReactiveFormsModule в свой пользовательский модуль: 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const tmpModule = NgModule({
    declarations: [tmpCmp],
    imports: [..., FormsModule, ReactiveFormsModule]
})(class {});
...