在Angular 8中使用@Input的问题
是指在Angular 8中如何正确使用@Input装饰器来接收父组件传递的数据。
@Input装饰器用于在子组件中声明一个属性，该属性可以接收父组件传递的值。以下是在Angular 8中使用@Input的步骤：
- 在子组件的类中，使用@Input装饰器声明一个属性，例如：
- 在子组件的类中，使用@Input装饰器声明一个属性，例如：
- 这里的
data是子组件中用于接收父组件传递数据的属性。 - 在父组件的模板中，使用子组件的标签，并通过属性绑定将数据传递给子组件，例如：
- 在父组件的模板中，使用子组件的标签，并通过属性绑定将数据传递给子组件，例如：
- 这里的
parentData是父组件中的属性，可以是任意类型的数据。 - 在子组件中，可以通过
data属性来访问父组件传递的数据，例如： - 在子组件中，可以通过
data属性来访问父组件传递的数据，例如： - 在子组件的生命周期钩子
ngOnInit中，可以打印出父组件传递的数据。
@Input的优势是可以实现父子组件之间的数据传递，使得组件之间可以更好地通信和共享数据。
@Input的应用场景包括但不限于：
- 在父子组件之间传递数据，例如将父组件的数据传递给子组件进行展示或处理。
- 在动态组件中传递数据，例如根据不同的数据动态加载不同的子组件。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
3回答
在Angular 8中使用@Input的问题
angular
我正在做我的第一个angular项目，我的家庭组件html如下所示 <div> <h1如下所示
import { HttpClient } from '
浏览 22提问于2019-11-14得票数 1
回答已采纳
1回答
无法在angular中使用@Input()传递道具
javascript、angular、typescript
我正在使用非常基本的angular项目。我想在两个角度组件之间传递道具。当组件的属性直接呈现在相关的HTML文件中时，它们工作得很好。当将它传递给另一个组件时，它会显示错误。父组件的HTML文件</app-todo-item>import { Component, OnInit,I
浏览 5提问于2021-02-13得票数 1
回答已采纳
1回答
在Angular 2中使用@Input属性
angular
下面是我的Angular 2组件代码示例selector: 'author-edit',
@Input() author: AuthorModelalert(this.author.id); // ERROR Cannot read property &#x
浏览 5提问于2017-03-03得票数 0
回答已采纳
3回答
Angular 6:在ngOnInit中使用@Input的值
angular、ngoninit
我想通过使用输入来检索模型汽车的值，但我不确定它是如何工作的。这是我尝试过的方法。@Input() model : Car this.car= this.carService.getcar(model.id);}
不幸的是，模型总是empty.How，我能做吗？
浏览 0提问于2019-02-14得票数 1
2回答
来自其他组件的Angular @Input()数组，有问题
angular、typescript、input、components、display
我是Angular的新手，我正在尝试开发一个非常基本的博客应用程序。我在这里得到了一些帮助，可以通过@Input()装饰器从另一个组件检索属性，但它似乎不适用于数组，或者至少不是这样。在post-list-item组件中嵌入post-list组件中，我希望显示位于app-component.ts数组中的属性的值。显然我错过了什么，我不知道它是什么，因此请求您的帮助！下面是我的代码：Stackblitz
浏览 28提问于2020-04-10得票数 0
回答已采纳
2回答
我的应用程序需要哪些角2模块？
angular
我将@Input添加到了角2指令中，得到了一个错误，使我相信我没有导入包含@Input元数据的角2模块。404 (Not Found)
这一点的证明是，当我删除@Input元数据时，应用程序不会生成任何错误。在我使用@Input元数据的模块中，我从IDEA (IDEA 2016.2)中导入了{Input} (IDEA 2016.2)，自动为我添加了引用。，我正在尝试使用@Input
浏览 4提问于2016-09-28得票数 1
2回答
用自定义事件更新角模型
javascript、angularjs
我有一个绑定到模型值的文本输入，我希望用户输入在延迟之后更新模型，但是对输入值的编程更改可以通过响应自定义事件立即更新模型。下面是我在基础上整理的内容<input id="test_input" ng-model-options="{updateOn: 'default; }});$scope.
浏览 2提问于2016-06-13得票数 0
1回答
Angularjs -ng-禁用angular.isDefined不起作用
javascript、angularjs
当我打开kendo窗口时，我正在尝试启用/禁用基于后端的值的单选按钮。我在超文本标记语言中使用了带有angular.isDefined和angular.isUndefined的ng-disabled，但它不起作用。下面是我的代码。col-md-6 zero-left-padding ligther" style="margin-left:-107px;">
<label for="p
浏览 0提问于2016-01-16得票数 0
1回答
angularjs过滤器无法使用coffeescript正确编译
angularjs、coffeescript
我使用了try coffeescript，它编译正确，但在我的应用程序中，我使用yo:angular filter capitialize安装了过滤器，它正确地创建了文件，但当我为应用程序提供服务时，我得到了一个'use strict'
.filter 'capitialize', -> 'capitializ
浏览 2提问于2015-07-24得票数 0
1回答
在angular/Javascript中，如何对输入html元素中的字符串使用掩码
javascript、angular、angular-material
我想用angular/Javascript屏蔽输入html元素中的字符串。 下面是一个这样的例子的图像，有没有可用的angular库，或者如何在Javascript中做同样的事情。 ? 假设substring(concat(input1,input2),3)是字符串，那么它必须具有只有两个元素的连接应该是允许的，对于只有两个元素的子串，可以使用字符
浏览 26提问于2019-09-12得票数 0
7回答
如何使用angular.element('#id')获取输入元素的值
javascript、jquery、angularjs
当我试图使用angular.element获取输入元素的值时，它的返回没有定义。这是我的代码： console.log(angular.element('#username').value); // undefinedconsole.log(document.getElementById('username').value); //
浏览 6提问于2015-04-16得票数 21
回答已采纳
1回答
如何定义带有角元素的自定义元素方法
angular、angular-elements
我们的Angular-Elements any组件应该有两个方法openModal()和closeModal()，它们可以作为自定义元素React、Vue或任何其他库来更改可见性状态。这种简单的javascript使用应该是可能的：<button id="openModal" onclick="openModal()visible = false;
浏览 1提问于2020-12-01得票数 3
回答已采纳
1回答
角的JQ Lite函数(triggerHandler方法)不能在Internet 11中工作
javascript、jquery、angularjs、jquery-ui、datepicker
我有一个Angular.js应用程序，它使用一些日历输入来选择日期范围。日历输入使用jQuery UI数据报警器。我非常清楚在一个有角度的应用程序中使用jQuery模块可能产生的危险，并恳请我们避免在这个线程中开始讨论。自定义数据报童指令
更新控制器作用域的angular.element(el).triggerHandler('input')方法(否则只有UI更改--即使监视范围，如果从jQu
浏览 2提问于2016-01-06得票数 1
回答已采纳
1回答
Angular 9常春藤，NgControl未在指令中初始化
angular-reactive-forms、angular-directive、angular9、angular-ivy
我正在尝试将我的项目更新到Angular9 / Ivy，但遇到了以下问题。我有一个自定义的"disabledControl“指令，如下面的博客(https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular我在一个带有表达式的反应式形式中使用它，以基于复选框组合启用/禁用特定控件。
浏览 14提问于2020-04-03得票数 2
回答已采纳
1回答
当我传递带有括号符号的类型时，为什么在Angular中复选框不能按预期工作？
angular、forms、typescript、angular-reactive-forms
我基本上花了几个小时来修复一个使用复选框的动态角度(反应)形式的问题。最后，我发现设置<input [type]="'checkbox'">会产生一个不同的、意想不到的结果，而<input type="checkbox">则按预期工作。我一直认为括号表示法可以让我在模板中传递TypeScript对象，因此[bla]="'foo&#x
浏览 25提问于2019-03-31得票数 2
回答已采纳
1回答
控制器中的注入百分比滤波器
javascript、angularjs、dependency-injection、angularjs-controller、angularjs-filter
当在我的ng-app上调用ng- strict di时，我收到一个错误：“$injector:strictdi percentageFilter没有使用显式注释，不能在严格模式下在线调用”。<span ng-hide="item.edit" ng-bind="item.tax | percentage"></span>
我尝试在我的注入中使用字符串“百分比”和percentageFilter来解决这个问题。$fi
浏览 2提问于2015-01-14得票数 1
回答已采纳
1回答
使用javascript/VBA以编程方式输入angularjs文本字段
javascript、angularjs、vba、excel
我正在使用Excel VBA从AngularJS应用程序中抓取网页。我正在尝试使用类似- ie.Document.getElementsByTagName("button")(15).Value = "112233"的内容在文本输入中输入值，我也尝试过- ie.Document.parentWindow.execScript我已经搜索了一些其他张贴的问题，但问题仍然存在。该元素为：
<input whole
浏览 3提问于2016-09-29得票数 0
1回答
模块'AppModule‘声明了意外的模块'NgAutoCompleteModule’。请添加@管道/@指令/@组件批注
javascript、angular、npm、angular5、angular2-template
我正在尝试在我的angular 2/4+项目中实现自动补全功能。我已经尝试了许多库，但都不起作用。Please add a @Pipe/@Directive/@Component annotation我遵循了除add mapping in systemjs config部件之外的所有步骤我在使用CLI创建的项目中找不到systemjs文件
浏览 0提问于2018-04-23得票数 1
8回答
指令[(ngModel)]=不再在rc5中工作
angular
ngModel抛出异常，这在rc4中运行良好这些都是例外情况：
zone.js@0.6.12?/CommunityListComponent类CommunityListComponent -内联模板中的错误:10:27原始异常:未指定名称的窗体控件没有值访问器
浏览 0提问于2016-08-11得票数 10
1回答
检测角度模板中的数组
angularjs
我有一个我正在迭代和显示的数组。但是，有时它找到的项是一个数组。我想对此做一些不同的事情，使用一个ng-if。我不确定如何轻松地做到这一点。这似乎是一个常见的问题，但似乎没有一个简单的解决方案。
浏览 0提问于2015-05-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
