在 Angular 中檢視子元件

1. 在 Angular 中將 ViewChild 與 DOM 元素一起使用
2. 在 Angular 中將 ViewChild 與子元件一起使用

@ViewChild 是 Angular 中最常用的裝飾器。它是我們在學習 Angular 時遇到的第一個裝飾器之一。

@ViewChild 具有本教程中討論的許多功能，每個用例都有實際示例。

@ViewChild 是一個配置檢視查詢的屬性裝飾器。如果檢視 DOM 發生更改並且新的子項與選擇器匹配，則更新該屬性。

我們可以將@ViewChild 與指令、DOM 元素和子元件一起使用。我們可以在示例中瞭解如何使用@ViewChild。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

讓我們建立一個指令 LanguageDirective。該指令將查詢具有屬性 appLanguage 的元素，並在元素中新增單詞 Language 的文字。

有兩種方法可以使用 @angular/cli 生成指令或建立檔案 language.directive.ts。

# Angular
ng generate directive language --skip-tests

該命令將建立一個 language.directive.ts 檔案並將指令新增到 app.module.ts 檔案中。我們將使用 ElementRef 和 Renderer2 來重寫文字。

因此，我們在 language.directive.ts 中的程式碼將如下所示。

# angular
import {
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';

@Directive(
  { selector: '[appLanguage]' }
)
export class LanguageDirective {
  language = 'NodeJs';

  constructor(elem: ElementRef, renderer: Renderer2) {
    let language = renderer.createText('Language ');
    renderer.appendChild(elem.nativeElement, language);
  }
}

app.module.ts 中的程式碼如下所示。

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { LanguageDirective } from './language.directive';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, LanguageDirective],
  bootstrap: [AppComponent],
})
export class AppModule {}

將 appLanguage 屬性新增到元件模板中包含文字的 li。因此，我們在 app.component.html 中的程式碼將如下所示。

# Angular
<h2>Programming Languages</h2>
<ul>
  <li appLanguage>Angular</li>
  <li appLanguage>React</li>
  <li appLanguage>React Native</li>
</ul>

輸出：

元素內容前的單詞 Language 也可以訪問 LanguageDirective 的例項變數並使用其值設定 extraLanguage 例項變數。

因此，我們在 app.component.ts 中的程式碼將如下所示。

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { LanguageDirective } from './language.directive';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  extraLanguage!: string;

  @ViewChild(LanguageDirective)
  set appLanguage(directive: LanguageDirective) {
    this.extraLanguage = directive.language;
  }

  ngAfterViewInit() {
    console.log(this.extraLanguage); // NodeJs
  }
}

我們在上面的程式碼中使用了一個 setter 來設定 extraLanguage 變數。

現在，你會注意到它將等待 AfterViewInit 生命週期掛鉤來訪問變數，因為在載入初始檢視後子元件和指令變得可用。

輸出：

上面的輸出表明父元件可以使用 @ViewChild 訪問指令中的值。

在 Angular 中將 ViewChild 與 DOM 元素一起使用

在本例中，我們將遍歷 DOM 元素並使用 @ViewChild 訪問它們。 @ViewChild 允許我們使用模板引用變數訪問本機 DOM 元素。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

例如，我們在 app.component.html 中有一個輸入標籤，其中 #forViewChild 引用變數顯示在下面的程式碼中。

# Angular
<input #forViewChild placeholder="Your favorite Programming Language">

我們還將在 app.component.css 中新增一些 CSS。

# Angular
p {
  font-family: Lato;
}
input {
  padding: 5px 10px;
}
label {
  font-size: 20px;
  padding-right: 10px;
}

輸出：

現在，我們可以使用 @ViewChild 訪問輸入並設定值。app.component.ts 中的程式碼如下所示。

# angular
import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('forViewChild') forViewChild!: ElementRef;
  ngAfterViewInit() {
    this.forViewChild.nativeElement.value = 'Angular!';
  }
}

因此，當 ngAfterViewInit 執行時，輸入值將被更改並設定為 Angular!如下例所示。

輸出：

正如你在上面的示例中看到的，父元件使用 @ViewChild 設定子 DOM 元素的值。

在 Angular 中將 ViewChild 與子元件一起使用

使用@ViewChild，我們可以訪問子元件並呼叫子元件可用的方法或例項變數。現在我們將通過一個示例來了解如何在 Angular 中將 @ViewChild 與子元件一起使用。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

現在，讓我們建立一個新元件作為 HelloComponent。

我們可以通過兩種方式建立一個新元件。通過使用 @angular/cli 並執行以下命令。

# Angular
ng generate component hello --flat --skip-tests

使用此命令，將建立 hello.component.ts、hello.component.html 和 hello.component.css 檔案。或者我們可以手動建立這些檔案。

現在，在 app.module.ts 中，我們需要新增新建立的元件。app.module.ts 中的程式碼如下所示。

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我們將向 HelloComponent 新增 GreetingMessage 方法以返回訊息。

# Angular
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css'],
})
export class HelloComponent implements OnInit {
  constructor() {}

  GreetingMessage() {
    return 'Hello Member!';
  }

  ngOnInit(): void {}
}

現在，我們將使用 <hello> 引用 app.component.html 中的子元件。因此，我們的程式碼將如下所示。

# Angular
<hello>It Works</hello>

我們將使用 @ViewChild 從父元件類 app.component.ts 呼叫 GreetingMessage 方法。因此，我們的程式碼將如下所示。

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(HelloComponent) hello!: HelloComponent;

  ngAfterViewInit() {
    console.log(this.hello.GreetingMessage());
  }
}

輸出：

本教程通過示例教我們如何在不同情況下使用@ViewChild。