從 Angular 中的子控制器訪問父範圍

Rana Hasnain Khan 2022年4月20日
從 Angular 中的子控制器訪問父範圍

我們將介紹如何從 Angular 中的子控制器訪問父範圍。

從 Angular 中的子控制器訪問父範圍

當我們在基於元件的庫或框架上工作時,有很多場景需要在兩個元件之間共享資料。

首先,我們將建立一個 users 元件。

# angular CLI
ng g c users

上面的命令將生成一個新的 users 元件。

我們可以看到 app 資料夾內會有一個新的 users 資料夾。為了顯示我們的 users 元件,我們需要使用 user.component.ts 中設定的 users selector

所以讓我們在 app 元件中顯示 users 元件。首先,我們需要在 app.module.ts 的宣告中新增 UsersComponent

因此,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 { UsersComponent } from './users/users.component';

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

我們需要在 app.component.html 中建立一個帶有使用者選擇器的標籤,它將顯示我們在 users.component.html 中新增的任何內容。app.component.html 中的程式碼如下所示。

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users></app-users>

輸出:

在父檢視中顯示子元件

如圖所示,app-users 標籤顯示了 users works!因為,在 users.component.html 中,我們有以下程式碼。

# angular
<p>users works!</p>

讓我們將其轉換為標題並從父元件傳送資料。

首先,我們將把 <p> 標籤更改為 <h3>

# angular
<h3>Child Component</h3>

輸出:

在子元件中將 p 更改為 h3

我們將簡單的資料從父元件傳送到子元件。我們將在 app.component.ts 檔案中定義一個變數,因此我們的程式碼如下。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  data = "User Name"
}

如程式碼所示,我們將使用者名稱分配給資料;讓我們將此資料傳送到子元件。因此,app.component.html 將如下所示。

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users [data] = "data"></app-users>

通過將 [data] 與變數 data 繫結,我們向子元件傳送資料,但它還沒有完全繫結。

我們必須在 users.component.ts 檔案中匯入 inputInput 是一個裝飾器,它將讀取我們傳送給子元件的資料並將其顯示在子元件中。

在我們的 UsersComponent 類中,我們將讀取我們在 app-users 標記內的 app.component.html 中繫結的屬性。因此,我們在 users.component.ts 中的程式碼將如下所示。

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

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  @Input() data
  constructor() { }

  ngOnInit() {
  }
}

如程式碼所示,我們使用@Input() data 繫結 app.component.htmlapp-users 標記的 [data]。我們將在 users.component.html 檔案中顯示我們收到的資料。

# angular
<h3>Child Component</h3>
<h4>Data Recieved:</h4>
<p>{{data}}</p>

輸出:

從父元件到子元件的資料繫結

我們已經從父元件接收到子元件的資料。我們現在將討論如何從父級到子級共享物件。

讓我們嘗試通過更改我們傳送的資料來共享一個物件。

# angular
data = {
    name: 'Rana Hasnain',
    age: 25
  }

輸出:

從父元件到子元件共享物件

我們可以看到我們顯示的是 [object Object],而不是來自該物件的資料。我們現在必須做的是修改 users.component.html 檔案中的程式碼並將 {{data}} 更改為 {{data.name}}{{data.age}},並且它將顯示物件。

# angular
<h3>Child Component</h3>
<h4>Data Received:</h4>
<p>Name: {{ data.name }}</p>
<p>Age: {{ data.age }}</p>

輸出:

最後結果

所以現在我們可以看到我們已經從父元件到子元件共享資料和物件。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - Angular Controller

相關文章 - Angular Scope