迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

从 Angular 中的子控制器访问父范围

作者:迹忆客 最近更新:2023/05/09 浏览次数:

我们将介绍如何从 Angular 中的子控制器访问父范围。

从 Angular 中的子控制器访问父范围

当我们在基于组件的库或框架上工作时,有很多场景需要在两个组件之间共享数据。

首先,我们将创建一个 users 组件。

$ 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 中的代码如下所示。

<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>

输出:

最后结果

所以现在我们可以看到我们已经从父组件到子组件共享数据和对象。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便