第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular 2中的動態(tài)模板URL

Angular 2中的動態(tài)模板URL

一只萌萌小番薯 2019-09-21 13:36:58
我一直在玩弄角2在過去的幾天,不知道是否有可能提供一個動態(tài)templateUrl的@View裝飾。我嘗試過將其傳遞給一個函數(shù)并從中返回一個字符串,但是整個函數(shù)都變成了字符串。我之前也沒有真正使用過Angular 1.x,所以我不知道我是否只是以錯誤的方式進行操作,但這是否可能,或者有沒有更好的方法來創(chuàng)建動態(tài)視圖?例如,如果用戶未登錄,我可能要顯示一個表單,但如果用戶登錄,則要顯示文本消息。像這樣的東西不起作用:@Component({  selector: 'my-component'})@View({  // This doesn't work  templateUrl: function() {    return this.isLoggedIn ? 'logged-in.html' : 'logged-out.html';  }})class MyComponent {  constructor() {    this.loggedIn = false;  }}任何幫助,將不勝感激。
查看完整描述

3 回答

?
開滿天機

TA貢獻1786條經(jīng)驗 獲得超13個贊

盡管可能不是最優(yōu)雅的解決方案,但我使用DynamicComponentLoader和ElementRef將模板值動態(tài)分配給組件。實際上,我在尋找一種解決方案,可以將多個自定義組件添加到占位符中。


我嘗試了shmck概述的函數(shù)中的服務注入,由于調用模板函數(shù)時服務尚不可用,因此無法正常工作。確實,this是指Window對象。


我使用的解決方案的參考URL可在以下位置找到:在Angular2中使用ComponentResolver和ngFor創(chuàng)建動態(tài)的anchorName / Components


我也將此方式稱為Plnkr1和Plnkr2。


Dartdocs網(wǎng)站提供了有關Angular 2 DynamicComponentLoader類的出色文檔,該類也適用于TypeScript。


簡而言之:


一個簡單的組件作為要使用的模板


@Component({

  selector: 'dt2-simple-block',

  properties: ["idx"],

  template: `<h1>Simple block for  {{ idx }} </h1>`,

  directives: []

})

class dt2SimpleBlock {

  constructor() {

  }

}

包含所有要添加的組件的Component的構造方法(我的應用程序要求包含多個子元素:


 constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {


  //iterate

  for (var i = 0; i < toSomething; i++) {

      // build the template

      var blockdirective = 'dt2-simple-block'

      var template = '<' + blockdirective + 

                     ' idx="' + this.userBlocks.userHomePanelBlocks[i] +

                     '"></' + blockdirective + '>';

      console.log(template);   // debugging purpose

      var directives = [dt2SimpleBlock];

        loader.loadNextToLocation(toComponent(template, directives), elementRef);

    }

并將輔助功能作為util放置在某處


function toComponent(template, directives = []) {

  @Component({ selector: 'fake-component' })

  @View({ template, directives })

  class FakeComponent { }


  return FakeComponent;

}


查看完整回答
反對 回復 2019-09-21
?
胡子哥哥

TA貢獻1825條經(jīng)驗 獲得超6個贊

我的解決方案:


Angular 2.0 ViewResolver類


class myViewResolver extends ViewResolver{

    resolve(component: Type): ViewMetadata {        

        var view =  super.resolve(component);

        // TODO: Write logic here:-)

        view.templateUrl = 'app/app.html';

        return view;

    }

}

bootstrap(App,[

    provide(ViewResolver , {useClass:myViewResolver})

]);


查看完整回答
反對 回復 2019-09-21
  • 3 回答
  • 0 關注
  • 682 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號