如何创建动态模板以使用Angular 2.0编译动态组件?

时间:2017-04-19 16:58:50

标签: angular angular2-template

我是一个新的角平板,我用的是角度2。 我正在开发一个使用IgGrid组件的组件。

  import {Component, OnChanges, OnInit} from '@angular/core';
  import { DaoService } from './services/dao.service';
  import {AccountModel, MarketplaceModel, SourceModel} from './models/account';

  declare var jQuery: any;

  @Component({
    selector: 'my-app',
    template: `
      <ig-grid [(options)]="gridOptions" [(widgetId)]='id'
               [(dataSource)]="accounts"></ig-grid>
    `
  })
  export class AppComponent {
    private errorMessage:any;
    private gridOptions: IgGrid;
    private accounts: SourceModel[] = [];
    private id: string = 'grid1';

    constructor(private _dao:DaoService) {
     ....

            this.accounts.push({
              AccountID: value.AccountID.toString(),
              AccountType: value.AccountType.toString(),
              CompanyName: value.CompanyName,
              MarketplaceName: this.design(elem_marketplaces),
              Status: value.Status.toString(),
            });
          });

        },error =>  this.errorMessage = <any>error
      );
      this.gridOptions = {
        width: "100%",
        autoGenerateColumns: false,
        columns: [
          { key: "AccountID", headerText: "Account ID", width: "10%", dataType: "number" },
          { key: "CompanyName", headerText: "Company Name", width: "15%", dataType: "string" },
          { key: "AccountType", headerText: "Account Type", width: "5%", dataType: "string" },
          { key: "Status", headerText: "Status", width: "5%", dataType: "number" },
          { key: "MarketplaceName", headerText: "Marketplace", width: "75%", dataType: "string" }
        ],
        features: [{
          name: "Paging",
          pageSize: 10
        }, {
          name: "Filtering"
        }, {
          name: "Sorting"
        }]
      };
    }

    private design(elem_marketplaces: MarketplaceModel[]) {
      // console.log(`<ms-comp [marketplaces]="${elem_marketplaces}"></ms-comp>`);
      return "<ms-comp></ms-comp>";
      // return `<ms-comp [marketplaces]="${elem_marketplaces}"></ms-comp>`;
    }
  }

问题出在函数设计中,我想将传递给函数的数据转换为组件的html代码

import {Component, Input} from '@angular/core';
import {MarketplaceModel} from '../models/account';
/**
 * Created by radouani on 19/04/17.
 */

@Component(
  {
    selector:'ms-comp',
    templateUrl:'marketplaces.component.html',
    moduleId:module.id
  }
)

export class MarketplaceComponent
{
   @Input() marketplaces:MarketplaceModel[];
}

0 个答案:

没有答案