国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

angularV4+學(xué)習(xí)筆記

galaxy_robot / 1184人閱讀

摘要：注解的元數(shù)據(jù)選擇器頁面渲染時，組件匹配的選擇器使用方式采用標(biāo)簽的方式。當(dāng)然必要的，在需要用到的的模塊中引入引入的指令，放在聲明里面引入的模塊引導(dǎo)應(yīng)用的根組件關(guān)于的元數(shù)據(jù)還未完全，所以后面會繼續(xù)完善。

angular學(xué)習(xí)筆記之組件篇

1注解 1.1組件注解

@Component注解，對組件進行配置。

1.1.1注解@Component的元數(shù)據(jù)

selector

template/templateUrl

inputs/outputs

host

styleUrls

selector:選擇器

頁面渲染時，Angular組件匹配的選擇器,

使用方式：

采用html標(biāo)簽的方式。
在《Angular權(quán)威教程》中，說明另外一種，

,這種規(guī)則與選擇器匹配規(guī)則一致，也可以為class選擇器，根據(jù)實際場景而用。（在Ideal中引入TSLint后，程序能夠正常運行，但是編輯器會警告，并提示消除警告方案）

例如：

@Component({
  selector: ".app-single-component",
  template: `
  

    這個是子組件 ：{{name}}
    
  

  `
})
templdate/templdateUrl：模版/模版路徑

組件具體的html模版，template為模版，templateUrl為模版的路徑。
template中支持es6的反引號，進行多行編寫，templdateUrl用于配置html模版的路徑。

注意：在Typescript中的構(gòu)造函數(shù)只允許有一個，這也是它與es6的一個區(qū)別

inputs/output:輸入/輸出

組件中的輸入與輸出，可以理解為，數(shù)據(jù)輸入到組件中，數(shù)據(jù)從組件中輸出到父組件中。

輸入使用方式:[變量名]，在父元素頁面中使用，@Input()，在子組件class中使用,代碼例子如下：

single-component.component.ts 
@Component({
      selector: "app-single-component",
      template: `
          

            這個是子組件 ：{{name}}
          

          `
        })
export class SingleComponentComponent implements OnInit {

  @Input () name: string ;

  ngOnInit () {
  }

}
app.component.ts 
@Component({
  selector: "app-root",
  template: `
    

      
  

  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = "我的世界";
  }
}

其中input作為@Component的元數(shù)據(jù)，那么還有另外一種寫法，之后的輸出也一致

其中一段代碼

@Component({
  selector: "app-single-component",
  inputs:["name"],
  template: `
  

    這個是子組件 ：{{name}}
  

  `
})

輸出使用方式：輸出的方式或許用廣播/訂閱來說更加合適。

single-component.component.ts改 
@Component({
  selector: "app-single-component",
  template: `
  

    這個是子組件 ：{{name}}
    
  

  `
})
export class SingleComponentComponent implements OnInit {

  value: string;
  @Input () name: string ;
  @Output() emotter: EventEmitter;

  ngOnInit () {
  }

  constructor () {
    this.value = "來源于組件的值";
    this.emotter = new EventEmitter();
  }

  sendMessage (): void {
    this.emotter.emit(this.value);
  }

}
app.component.ts改 
@Component({
  selector: "app-root",
  template: `
    

      
  

  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = "我的世界";
  }

  getComponentData (message: string): void {
     console.log(`獲取到子組件中的值：${message}`);
  }
}
host:用于在元素行配置元素屬性

值為json對象key-value，并且作用只做作用于當(dāng)前組件內(nèi)部，常用來添加class.

styleUrls:層疊樣式表url，值位數(shù)組，可以傳多個。

當(dāng)然必要的，在需要用到的component的模塊中引入：

@NgModule({
  declarations: [
    AppComponent,
    SingleComponentComponent // 引入的指令，放在聲明里面
  ],
  imports: [
    BrowserModule // 引入的模塊
  ],
  providers: [],
  bootstrap: [AppComponent] //引導(dǎo)應(yīng)用的根組件
})
export class AppModule { }

關(guān)于@component的元數(shù)據(jù)還未完全，所以后面會繼續(xù)完善。

源代碼git地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96070.html

相關(guān)文章

  • angularV4+學(xué)習(xí)筆記

    摘要：注解的元數(shù)據(jù)選擇器頁面渲染時，組件匹配的選擇器使用方式采用標(biāo)簽的方式。當(dāng)然必要的，在需要用到的的模塊中引入引入的指令，放在聲明里面引入的模塊引導(dǎo)應(yīng)用的根組件關(guān)于的元數(shù)據(jù)還未完全，所以后面會繼續(xù)完善。 angular學(xué)習(xí)筆記之組件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1組件注解 @Component注解，對組件進行配置。 1....

    LoftySoul 評論0 收藏0

  • ApacheCN 人工智能知識樹 v1.0

    摘要：貢獻(xiàn)者飛龍版本最近總是有人問我，把這些資料看完一遍要用多長時間，如果你一本書一本書看的話，的確要用很長時間。為了方便大家，我就把每本書的章節(jié)拆開，再按照知識點合并，手動整理了這個知識樹。 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1760&h=200); 貢獻(xiàn)者：飛龍版...

    劉厚水 評論0 收藏0

  • 【LNMPR源碼學(xué)習(xí)】筆記匯總

    摘要：此文用于匯總跟隨陳雷老師及團隊的視頻，學(xué)習(xí)源碼過程中的思考整理與心得體會，此文會不斷更新視頻傳送門每日學(xué)習(xí)記錄使用錄像設(shè)備記錄每天的學(xué)習(xí)源碼學(xué)習(xí)源碼學(xué)習(xí)內(nèi)存管理筆記源碼學(xué)習(xí)內(nèi)存管理筆記源碼學(xué)習(xí)內(nèi)存管理筆記源碼學(xué)習(xí)基本變量筆記 此文用于匯總跟隨陳雷老師及團隊的視頻，學(xué)習(xí)源碼過程中的思考、整理與心得體會，此文會不斷更新 視頻傳送門：【每日學(xué)習(xí)記錄】使用錄像設(shè)備記錄每天的學(xué)習(xí) PHP7...

    Barrior 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<