如何在Angular 5应用中正确使用@Input()？
在Angular 5应用中，@Input()装饰器用于接收父组件传递给子组件的数据。它允许父组件将数据绑定到子组件的属性上，以便子组件可以使用这些数据进行操作或显示。
要在Angular 5应用中正确使用@Input()，需要按照以下步骤进行操作：
- 在子组件的属性上使用@Input()装饰器，例如：
- 在子组件的属性上使用@Input()装饰器，例如：
- 这将创建一个名为data的属性，用于接收父组件传递的数据。
- 在父组件的模板中，使用方括号语法将数据绑定到子组件的属性上，例如：
- 在父组件的模板中，使用方括号语法将数据绑定到子组件的属性上，例如：
- 这里假设父组件有一个名为parentData的属性，它将被传递给子组件的data属性。
- 在子组件中，可以像使用普通属性一样使用@Input()定义的属性，例如：
- 在子组件中，可以像使用普通属性一样使用@Input()定义的属性，例如：
- 在ngOnInit生命周期钩子函数中，可以访问到父组件传递的数据。
@Input()的优势是可以实现父子组件之间的数据通信，使得组件之间更加灵活和可重用。它适用于需要将数据从父组件传递给子组件的场景，例如传递配置信息、用户输入等。
在腾讯云的产品中，与Angular 5应用开发相关的产品是腾讯云云开发（Tencent Cloud CloudBase），它提供了一站式的云端一体化开发平台，支持前端开发、后端开发、数据库、存储等功能。您可以通过以下链接了解更多信息：
腾讯云云开发官网：https://cloud.tencent.com/product/tcb
总结：在Angular 5应用中，通过使用@Input()装饰器，可以实现父子组件之间的数据传递。这种方式可以增加组件的灵活性和可重用性，适用于各种需要在组件之间传递数据的场景。腾讯云云开发是一个与Angular 5应用开发相关的产品，提供了一站式的云端一体化开发平台。
相关·内容
2回答
我正试图通过以下指南制作一个有角度的web组件：
它可以工作，但是当我必须将services注入到组件中时，没有什么工作了，如果我在构造函数中写入(private service: DataService)，就会有一个空白屏幕，并且没有控制台错误。
import {Component, Injector, Input, OnInit} from '@angular/core';
import {DataService} from '../../_service/data.service';
@Component({
selector: 'optix
浏览 3提问于2020-11-13得票数 2
回答已采纳
我使用Ionic AppFlow Live部署特性没有问题，但是构建使用的是开发环境，而不是生产环境。我有一个使用Live的类似应用程序，它在生产环境中正确构建，并且我在这两个应用程序的配置上找不到任何不同。
我有两个环境文件：
environment.prod.ts
environment.ts
该应用程序使用的是用于开发的environment.ts配置。
我可以通过USB在设备中正确地安装生产模式的应用程序，使用：
$ ionic cap copy --configuration=production
$ ionic cap open android
如何使用强制AppFlow使用生产环
浏览 15提问于2022-09-23得票数 0
现在，我已经成功地将angular 2组件集成到了我们的angularJS应用程序中，我想为这个版本对它们进行美化。但是，如果我使用SystemJS构建器，我会得到以下错误：
Fatal error: ENOENT: no such file or directory, open '{webAppRoot}angular2\angular2.js'
它似乎试图使请求(‘angular2/angular2’)变得丑化，但它没有正确地解决它。如何正确地美化angular2应用程序？
请注意，应用程序的angularJS部分是用ES5、JS和AMD编写的，angular2模块正在使用
浏览 1提问于2015-12-02得票数 3
我使用的是Angular 7，我想将angular应用程序作为一个小部件插入到另一个外部html文件中。
我知道有angular元素可以创建自定义元素并插入它，但其中有许多浏览器兼容性问题。我尝试在外部html中包含<app-root></app-root>并添加脚本，它在所有浏览器中都工作得很好。但是我无法将输入传递给根元素。
这是将我的angular应用程序包含在外部文件中的正确方式吗？以及如何将输入传递到根组件。
浏览 2提问于2020-05-09得票数 0
在web应用程序中，我有一个input type="date"，我希望用户已经默认当前日期。所以我使用了角，因为在纯js中，手机不起作用(尽管浏览器起作用了)。这是html部分：
<body ng-app="app">
<form ng-controller="DateController as dateCtrl">
<input type="date" id="date" value="{{value}}" ng-model="value"
浏览 6提问于2016-02-08得票数 0
回答已采纳
我在一个Angular4应用程序中工作，我正在尝试将值从子组件传递到父组件。.I已经实现了一些东西，但我无法获得预期的输出。
子组件映像...
下级组件编码...
<div class="row">
<div class="col-3">
<input type="text" readonly class="form-control col-8 text-center bg-white font-weigh
浏览 0提问于2018-03-12得票数 11
回答已采纳
我使用了try coffeescript，它编译正确，但在我的应用程序中，我使用yo:angular filter capitialize安装了过滤器，它正确地创建了文件，但当我为应用程序提供服务时，我得到了一个typeerr，因为它在.filter之前缺少一个')‘。
'use strict'
angular.module 'someapp'
.filter 'capitialize', ->
(input) ->
'capitialize filter: ' + input
编译为
浏览 2提问于2015-07-24得票数 0
2回答
如何以角向@Input添加验证，以便在提供不包含在所提供的选项中的@Input时，角抛出错误。我尝试使用枚举，但枚举无法验证模板中的变量。
我目前的工作实现是使用if语句。例如：
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss&#
浏览 1提问于2020-05-17得票数 0
回答已采纳
请注意，我正在使用我的angular应用程序中的ckeditor，但不能与我一起工作。这是我做的，我安装了这个包 npm install --save @ckeditor/ckeditor5-angular 在我安装这个包之后 npm install --save @ckeditor/ckeditor5-build-classic 在应用程序模块中，我正在添加此导入 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { FormsModule } from '@angular/f
浏览 31提问于2021-01-04得票数 1
我想以一种现代的方式将我网站上的几个切换开关的状态更改为yes或no。
我没有找到一个现成的解决方案，所以我必须弄清楚如何在Angular中正确地使用它。
我有10个开关，它们必须返回一个单独的布尔值，并将它们的文本分别更改为"yes“或"no”。如何在Angular中实现这一点？
这是我的当前代码，适用于1个交换机。(在Angular 11中使用bootstrap 5)
<div class="form-check form-switch">
<input class="form-check-input" t
浏览 1提问于2021-01-01得票数 0
我正在致力于将一个大型AngularJS应用程序升级到Angular 5+。这意味着在混合AngularJS应用程序中使用新的Angular 5组件。在许多情况下，表单嵌套在其他表单中。旧的AngularJS代码的父表单如下所示： export default function PersonDirective() {
return {
restrict: "E",
template: `
<div ng-form="personForm">
<
浏览 31提问于2020-04-23得票数 3
2回答
我试图在一个角度应用程序中使用，该应用程序还使用了对依赖关系管理的需求。我试图在表单字段(如form和button )中忽略input属性，这告诉浏览器形成特定按钮或输入属于哪一个。IE9缺乏这个特性。
我认为使用这种填充的最好方法是创建一个表单指令，并在链接函数中调用$.webshims.polyfill('forms')。
指令
define(['angular', 'webshims'], function(angular) {
return angular.module('myApp').directive('
浏览 3提问于2013-12-17得票数 9
回答已采纳
1回答
我试图将这个的展开/折叠功能复制到我的Angular 2应用程序中(我使用的是递归视图)，但我的尝试总是导致展开超过1个节点。
如何在Angular 2中实现正确的展开/折叠功能？
下面是我当前的代码：
import {Component, Input} from '@angular/core';
@Component ({
selector: 'tree-view',
template: `
<ul>
<li *ngFor="let node of treeData">
浏览 15提问于2016-09-14得票数 3
回答已采纳
我有两个输入连接到同一个模型。使用model.valueAccessor.writeValue( value )在一个via指令中更改值不能正确更新。似乎是前一段时间的价值。
Html视图-简化(不知道为什么没有突出显示语法)：
<tr *ngFor="let intvObj of intervals; let $index = index">
<td><input [appPdMask]="'time'" [(ngModel)]="intervals[ $index - 1 ].from"
浏览 0提问于2018-06-26得票数 2
回答已采纳
在Meteor + Angular 2应用程序中包含日期时间选择器的正确方式是什么?我尝试使用prime-ng ui日历
已发出错误- this.calendarElement.datepicker不是函数
如果这是做事情的正确方法或任何其他更简单的方法
浏览 4提问于2016-06-07得票数 0
在使用angular2的ES5 angularJS应用程序中使用requireJS组件时遇到了困难。当我使用angular2.dev.sfx.js时，我可以使用以下代码进行引导：
define([
'nxApp',
'nxRoute',
],
function(nxApp, nxRoute){
var upgradeAdapter = new ng.UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['nxApp']);
return upg
浏览 1提问于2015-11-27得票数 0
回答已采纳
由于我使用的是扩展运算符，所以我的更改不会反映到子组件。正确的处理方法是什么？
儿童法典：
import {
Component,
Input,
OnChanges,
OnInit,
SimpleChange,
} from '@angular/core';
@Component({
selector: 'my-child',
template: `
<h1>{{Nwname}}</h1>
<ul>
<li *ngFor="let item of updatedRow
浏览 7提问于2022-10-11得票数 0
回答已采纳
3回答
我有以下资料自定义sass文件：
@import '../node_modules/@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-red, 700, 800);
$app-accent: mat-palette($mat-red, 700, 800);
$app-warn: mat-palette($mat-red, 700, 800);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-war
浏览 4提问于2017-09-25得票数 7
回答已采纳
这里的问题是如何从Angular 2中的服务设置输入模型值。
下面是我的示例代码：
组件：
//our root app component
import {Component} from 'angular2/core'
import {Service} from './service'
@Component({
selector: 'my-directive',
providers: [],
template: `<input [(ngModel)]="abc">`,
directives: []
浏览 2提问于2016-08-03得票数 2
1回答
有时，我在单元测试中会出现一个注入错误，如下所示，这使我完全不知道我应该修复哪个依赖项。我试着使用我在TestBed.configureTestingModule配置中的提供程序，但这并没有帮助。有谁能想到我该如何着手调查这个问题？
✖ should create
Chrome 57.0.2987 (Mac OS X 10.11.0)
Error
at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1232:21 <- src/test.ts:1992:86) [angular]
at
浏览 3提问于2017-04-25得票数 2
回答已采纳
我正在为我的angular应用程序编写Karma测试。我使用用ControllValueAccessor创建的自定义表单控件。
有没有一种方法来测试实现的ControllValueAccessor方法(registerOnChange，...)
@Component({
selector: 'my-form-input',
templateUrl: 'input.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExis
浏览 6提问于2019-10-19得票数 0
我刚刚开始学习Angular4，我正面临一个我无法解释的问题。
我现在正在尝试构建两个组件：
我的主要组件是chatComponent，它应该显示一个子组件列表msgComponent。
为此，我在msgArray中定义了一个app.chatComponent数组，并通过à*ngFor指令对消息进行迭代。对于每条消息，我想显示一个子组件app.messageComponent。
到目前为止，除了之外，一切都运行良好-- msgArray中的第一条消息从未显示过.
为什么？
这是我的app.module.ts
import { BrowserModule } from '@ang
浏览 4提问于2017-09-14得票数 2
回答已采纳
3回答
我有一个表，其中插入来自DB的数据，但是，我想编辑那些根据我的检查限定的数据，因此应该是两个按钮，一个用于删除，一个用于将启用的编辑。如果插入到表中的行没有限定，我想禁用这些按钮。这个场景的正确实现是什么？
<tbody>
<tr *ngFor="let item of reservations">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.phone}}</td>
<
浏览 0提问于2018-09-19得票数 0
回答已采纳
我正在构建一个AngularJS单页javascript应用程序，因此index.html看起来如下所示：
<html>
<head>
<base href="/" />
...
</head>
<body id="ng-app" ng-app="myAngularApp">
<div class="holder">
//templates from app.js are rendered here
</div>
<
浏览 2提问于2014-04-28得票数 3
回答已采纳
我是Angular的新手。我正在尝试将openPGP库整合到我的应用程序中(客户端)。我需要一些关于如何将javascript库合并到Angular应用程序中的帮助。谢谢!
我正在通读openPGP文档，文档中提供的示例如下：
var openpgp = require('openpgp');
var key = '-----BEGIN PGP PUBLIC KEY BLOCK ... END PGP PUBLIC KEY BLOCK-----';
var publicKey = openpgp.key.readArmored(key);
var pgpMess
浏览 7提问于2014-09-17得票数 2
我是angular的新手，所以情况是这样的:有一个后端应用程序正在向Angular 5上的前端应用程序发送一些标题信息，所以我需要在我的登录页面上获取这些标题信息。我正在使用拦截器，这是代码
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('Before sending data');
console.log('Request : ', req);
con
浏览 1提问于2018-11-13得票数 0
1回答
我正在工作角13的应用程序，并试图集成通用。我遵循了正式的文档来集成。
角版
Angular CLI: 13.3.8
Node: 14.19.3
Package Manager: npm 6.14.17
OS: linux x64
Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker
Package
浏览 5提问于2022-06-23得票数 -3
我是AngularJS的新手，每次学习教程并添加外部模块时都会遇到问题。我有一些关于如何避免注入错误的问题。
Q1.如何解决注入器/模块问题？我使用bower安装了'ngSanitize'，包括在HTML中，如：
<body ...>
<script src="assets/js/angular.min.js"></script>
<script src="bower_components/ngSanitize/index.js" type="text/javascript&#
浏览 6提问于2015-12-04得票数 0
回答已采纳
1回答
最近，我正试图编写用于指令的测试用例。
例如，这是一个在浏览器中管理DOM的指令。
var demoApp = module('demoApp', ['']);
demoApp.directive('tabTo', function(){
var linkFunc = function(scope, element, attrs, controllers){
element.bind('keyup', function(e){
var maxLength = attrs['m
浏览 0提问于2014-09-02得票数 1
回答已采纳
我已经开始使用中的代码，并且正在慢慢地修改它。我的目标是创建一个简单的电子表格应用程序。在angular-seed/app/index.html中，我首先添加了以下代码：
<input type="text" ng-model="KID" placeholder="ID goes here">
<input type="text" ng-model="DESC" placeholder="Description goes here">
<input type="
浏览 0提问于2012-12-01得票数 0
回答已采纳
1回答
我在用Webpack，试着用angular2。
这就是为什么我编辑了我所有的东西，以便能够编译打字本。我的计划是像那样做，所以把打字稿编译成ES6，然后用Babel把它转到ES5上。
这就是我的小应用程序的样子：
import {Component} from 'angular2/core';
@Component({
selector: 'angular-2-component',
template: '<h1>Hello World!</h1>'
})
export class angular2C
浏览 0提问于2016-09-30得票数 1
我是angular 4的新手。我发现在angular中有一种方法可以使用@Input将数据从父组件传递到子组件，如下所示：
<child [dataToPass]="test"></child>
我的问题是如何使用路由器做同样的事情。在路由器中，没有像输入这样的子定义；它只有<router-outlet></router-outlet>，那么如何使用@Input传递数据呢？
浏览 0提问于2017-09-28得票数 2
1回答
我有一个表单，分为两个不同的部分，我希望用户点击一个部分旁边的“编辑”，然后只提交表单的那一部分。我已经用jquery做过很多次了，但是我对角度非常陌生，我找不到/想不出正确的方法。另外，需要以编程的方式完成，因为有更多的输入和可能会添加到表单中的更多的部分。任何帮助都非常感谢，谢谢！
编辑：只是为了澄清，我的问题是:我如何才能提交表单，但只能提交第一行输入，或者只提交第二行输入。
编辑：
好吧这是我关于如何完成这件事的最新想法..。
我正试着把一份表格分成两部分。我在想，我可以将表单的每一部分封装在一个单独的控制器中，然后在一个名为"sendForms“的工厂/服务中执行sendFo
浏览 5提问于2014-12-03得票数 2
我正在尝试将一个Jsf应用程序移植到Angular5。在Jsf中有一个有用的概念，称为转换器。转换器用于将输入组件值(字符串)转换为正确的数据模型类型。在Angular中也有类似的东西吗？假设我有一个日期字段
myfield: Date;
和如下所示的输入组件：
<input type="date" [(ngModel)]="myfield">
我还没有找到一种简单的方法来将输入组件中键入的值转换为日期。我找到的唯一解决方案是处理ngDataChange事件，并手动将字符串解析/转换为日期。(并应用管道以正确的格式显示日期)
我漏掉了什么吗？
浏览 2提问于2018-01-10得票数 3
Angular2 2的当前文档没有提供在@Input和@Output语法中使用es5的示例。
我在试着弄一个angular2小提琴，所以需要使用es5
这是es2016版本
class BankAccount {
@Input() bankName: string;
@Input('account-id') id: string;
// this property is not bound, and won't be automatically updated by Angular
normalizedBankName: string;
}
浏览 3提问于2015-10-25得票数 9
回答已采纳
我对angular2的了解有限。通过使用jquery，我们可以很容易地获得属性值。例如在HTML中
<input id="foo" type="text" name="foo">
在jquery中
$(document).ready(
function ()
{
console.log($('#foo').attr('type'));// output foo
});
在angular2中，如果我们使用反应形式，我们将输入字段写成这样：
<input
浏览 5提问于2018-01-16得票数 3
如果我有一个带有表单输入的组件，并且希望将OnInit块中的两个语句检测为我的指令中的事件，那么正确的方法是什么？我在“输入”和“ngModelChange”方面很幸运，但我试图侦听的事件中，没有一个事件是为了捕捉模型驱动表单的patchValue()方法或模板驱动表单的直接赋值(即使它反映在DOM中)。
这是我的组成部分：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'
@Component(
浏览 0提问于2019-03-12得票数 2
回答已采纳
当我第一次加载角度元素时，一切都很好，所有的材料下垂和工具提示都很好。当我们关闭下面的角度应用程序时，
以下是它加载的方式：
<div id="angular-app">
<angular-element></angular-element>
</div>
闭幕时: document.getElementById('angular-app').remove()；
这是我们正在做的，当再次发射时，我们再次创建角元素，但是第二次加载应用程序正在加载，但是没有一个角度材料功能工作。
请建议如何正确销毁和再次装载。
浏览 2提问于2022-03-20得票数 0
我需要使用类似jquery的angular js提交一个带有原生动作url的表单，在jquery中我们可以像这样提交表单，下面在Angular js 1.x中的对应代码是什么？我知道在angular js中，大部分表单都是用ajax提交的，但在这里我想提交如下内容
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input id="other" type
浏览 55提问于2018-07-31得票数 0
我从控制器中从ng-model获得日期值。我希望将日期格式化为10-22-2013，但在输出中，我将日期格式设置为10/22/2013
在这里格式化日期的正确方法是什么？
联署材料：
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(2013, 9, 22)
};
}
浏览 3提问于2016-04-03得票数 0
回答已采纳
1回答
我的棱角材料部件正在工作，但没有正确显示。我用的是角形
import { FormBuilder, FormGroup } from "@angular/forms";
该组件如下所示：
<form [formGroup]="searchForm" class="form-container">
<mat-card>
<mat-card-content>
<div class="col-md-6">
<mat-form-field>
浏览 11提问于2022-06-08得票数 0
回答已采纳
为什么“这个”周围的一个天使的项目不起作用？
我有一张这样的桌子
<table>
<tr ng-repeat="brand in brands">
<td>{{brand.name}}</td>
<td>
<input id="orderInput" onkeyup="setOrder({{brand.id}}, this.value);"
type="text" class="form-control form-c
浏览 1提问于2019-02-05得票数 1
回答已采纳
我有以下设置： VS Code 1.53.3
Test Explorer UI (2.20.3)
Angular/Karma Test Explorer (1.2.8) 当我创建一个新的Angular 12应用程序时，我可以使用Test Explorer UI插件从VS代码中调试测试。 当我创建一个新的Angular 10应用程序时，调试器没有命中断点。断点显示为灰色，并显示"Unbound breakpoint“消息。 我需要做什么才能在VS Code中调试Angular 10应用程序？
浏览 115提问于2021-06-19得票数 1
回答已采纳
我有以下文件：
index.html
<html ng-app="gitHubViewer">
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script data-require="angular-route@*" data
浏览 2提问于2015-04-10得票数 1
回答已采纳
我正在创建angular2打字应用程序。我使用angular/material2 2是为了呈现更好的设计。至于构建这个项目--我使用的是gulp。
问题陈述:我将@angular/router-deprecated更改为@angular/router，并被迫更新其他包(@angular/core、@angular2-material等)
在此之后，gulp构建停止工作，并显示以下错误：
.../node_modules/@angular2-material/button/button.d.ts(28,14): error TS1005: '=' expected
.../nod
浏览 8提问于2016-08-29得票数 4
回答已采纳
1回答
我们正在使用角通用渲染我们的角5应用程序。HTML5由NodeJS服务器正确地呈现，但是即使它看到了HTML5，它也不会在视觉上呈现页面。
这就是谷歌对网页的看法。
📷
这是谷歌看到的代码
📷
因此，即使它看到了正确的代码，它也不能在视觉上正确地呈现它。
这对SEO有害吗？
也许它是由https://material.angular.io/components/tabs/overview这样的组件引起的，所以Google不呈现自己的库？
浏览 0提问于2018-02-12得票数 0
回答已采纳
1回答
我有一些基本的表单/输入html，如果显式地写成如下，它们可以工作(包括验证)：
<form name="forms.create" novalidate>
<div class="si-container">
<div class="si-input-container">
<input class="si-input" name="someNum" placeholder="Enter a number"
浏览 0提问于2014-07-28得票数 0
回答已采纳
我找到了一个，它是一个登录页面。我想把它放到我的angular应用程序中，但是我不能设置背景的样式。我的背景是空的。
下面是我放入angular应用程序中的内容: 1. html文件
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="text" name="u" placeholder="Username" required="required"
浏览 8提问于2018-10-23得票数 0
我在angular7应用程序中使用了bootstrap-4。我想用bootstrap设计我的应用程序
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"
浏览 12提问于2019-11-01得票数 0
回答已采纳
我正在学习angular和构建一个小应用程序。我使用的是angular 1.3.1。我编写了一个自定义过滤器，在阅读完文档后，我认为*我使用的语法是正确的。依赖注入出了问题，但是我一直得到一个“未知的提供者”，我不能再推断出什么是错误的了。请告诉我为什么这个不起作用，提前谢谢！
下面是我的filter函数：
angular.module('trimWords', [])
.filter('trimWords', function(){
return function(input, words){
if(isNaN(words)
浏览 0提问于2015-10-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
