<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                [TOC] >[success] # ngIf指令 ![](https://img.kancloud.cn/33/11/3311c4ad0022d0d2d258467199033d82_1025x492.png) 下面的代碼中通過 ***ngIf** 與 **else** 來實現顯示隱藏標簽 **src\app\components\scrollable-tab\scrollable-tab.component.html** ~~~ <ul> <li *ngFor="let menu of menus; let i = index; let f= first; let even= even;"> <a href="#" [class.active]="i == selectedIndex" [class.first]="f" [class.even]="even" (click)="selectedIndex = i"> {{ menu.title }} </a> <span class="indicator" *ngIf="i == selectedIndex else elseTemp"></span> </li> <ng-template #elseTemp> <span>hello</span> </ng-template> </ul> ~~~ >[success] # 組件傳值 ![](https://img.kancloud.cn/0e/d9/0ed93b42f70d0d5c46c94de2babea721_1006x479.png) 接下來演示如何進行 **組件傳值** >[success] ## 父傳子 1. **父組件代碼** 父組件通過 **[menu]** 屬性來把菜單列表 **topMenus** 傳給子組件 **html** ~~~ <!-- 引入組件 --> <app-scrollable-tab [menus]="topMenus"></app-scrollable-tab> ~~~ **父組件** 要給 **子組件** 傳入 **子組件規定得數據格式得數據** ,所以就這里就引入子組件中定義好得接口 **js** ~~~ import { Component } from '@angular/core'; import { TopMenu } from './components' // 引入子組件中定義得接口 @Component({ selector: 'app-root', // 組件名稱 templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) // 以下是類似vue的變量跟方法 export class AppComponent { // selectedIndex = -1; // 高亮選中的顏色下標 topMenus:TopMenu[] = [ // 菜單列表 { title:'熱門', link: '' }, { title:'男裝', link: '' }, { title:'百貨', link: '' }, { title:'運動', link: '' }, { title:'手機', link: '' }, { title:'家紡', link: '' }, { title:'食品', link: '' }, { title:'電器', link: '' }, { title:'鞋包', link: '' }, { title:'汽車', link: '' }, { title:'水果', link: '' }, { title:'電腦', link: '' }, { title:'內衣', link: '' }, { title:'家裝', link: '' }, { title:'母嬰', link: '' }, { title:'美妝', link: '' }, { title:'家具', link: '' }, ] } ~~~ 2. **子組件代碼** **子組件** 通過 **@input() 裝飾器** 來寫在屬性前面, **代表這個屬性是由父組件傳遞過來得** ,這里同時也要把 **TopMenu** 接口導出去,因為父組件使用了這個接口 **js** ~~~ import { Component, Input, OnInit } from '@angular/core'; // 聲明菜單接口 export interface TopMenu { title: string; link: string; } @Component({ selector: 'app-scrollable-tab', templateUrl: './scrollable-tab.component.html', styleUrls: ['./scrollable-tab.component.css'] }) export class ScrollableTabComponent implements OnInit { selectedIndex = -1; // 高亮選中的顏色下標 @Input() menus:TopMenu[] = [] // 菜單列表 constructor() {} ngOnInit(): void { } } ~~~ >[success] ## 子傳父 1. **父組件代碼** 父組件通過 **tabSelected** 自定義事件來接收子組件傳過來得值,并且接收得值要用 **$event** 來接收 **html** ~~~ <!-- 引入組件 --> <app-scrollable-tab [menus]="topMenus" (tabSelected)="handleTabSeleted($event)"></app-scrollable-tab> ~~~ **js** ~~~ import { Component } from '@angular/core'; import { TopMenu } from './components' // 引入子組件中定義得接口 @Component({ selector: 'app-root', // 組件名稱 templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) // 以下是類似vue的變量跟方法 export class AppComponent { // selectedIndex = -1; // 高亮選中的顏色下標 topMenus:TopMenu[] = [ // 菜單列表 { title:'熱門', link: '' }, { title:'男裝', link: '' }, { title:'百貨', link: '' }, { title:'運動', link: '' }, { title:'手機', link: '' }, { title:'家紡', link: '' }, { title:'食品', link: '' }, { title:'電器', link: '' }, { title:'鞋包', link: '' }, { title:'汽車', link: '' }, { title:'水果', link: '' }, { title:'電腦', link: '' }, { title:'內衣', link: '' }, { title:'家裝', link: '' }, { title:'母嬰', link: '' }, { title:'美妝', link: '' }, { title:'家具', link: '' }, ] handleTabSeleted(tabMenu: TopMenu){ // 接收子組件傳過來的值 console.log(tabMenu) } } ~~~ 2. **子組件代碼** 子組件在通過點擊事件 **handleSelection** 時候,通過 **@Output()裝飾器** 向父組件傳遞選中的值 **html** ~~~ <ul> <li *ngFor="let menu of menus; let i = index; let f= first; let even= even;"> <a href="#" [class.active]="i == selectedIndex" [class.first]="f" [class.even]="even" (click)="handleSelection(i)"> {{ menu.title }} </a> <span class="indicator" *ngIf="i == selectedIndex else elseTemp"></span> </li> <ng-template #elseTemp> <span>hello</span> </ng-template> </ul> ~~~ **js代碼** ~~~ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; // 聲明菜單接口 export interface TopMenu { title: string; link: string; } @Component({ selector: 'app-scrollable-tab', templateUrl: './scrollable-tab.component.html', styleUrls: ['./scrollable-tab.component.css'] }) export class ScrollableTabComponent implements OnInit { selectedIndex = -1; // 高亮選中的顏色下標 @Input() menus:TopMenu[] = []; // 菜單列表 @Output() tabSelected = new EventEmitter(); // 定義要回傳得數據 constructor() {} ngOnInit(): void { } handleSelection(index: number){ this.selectedIndex = index; // 子傳父 this.tabSelected.emit(this.menus[this.selectedIndex]) } } ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看