对于Angular2应用程序，组件从父级接收数据还是让组件自包含更好
对于Angular2应用程序，组件从父级接收数据是更好的选择。
在Angular2中，组件之间的通信可以通过输入属性（Input）和输出属性（Output）来实现。输入属性允许父组件向子组件传递数据，而输出属性则允许子组件向父组件发送事件。
通过让组件从父级接收数据，可以实现组件之间的解耦和复用。父组件可以根据需要将数据传递给子组件，子组件只需关注如何使用这些数据进行展示或处理，而不需要关心数据的来源。这样可以使组件更加独立，易于维护和测试。
另一方面，让组件自包含也是一种选择。如果组件需要自己管理数据，可以通过服务（Service）来实现。服务可以提供数据的获取、存储和处理功能，组件可以通过依赖注入的方式使用服务。这种方式适用于组件需要独立于父组件的数据源，或者需要在多个组件之间共享数据的情况。
总的来说，对于Angular2应用程序，组件从父级接收数据是更好的选择，可以实现组件之间的解耦和复用。如果组件需要自己管理数据，可以通过服务来实现。
相关·内容
如果我的angular2应用程序看起来像这样，顶部的金发女郎要和右边的生姜聊天，他们应该为它组织一个聚会吗？
发出事件，使用输入输出--这是angular2的方式吗？数据应该从子到父流到根，然后从父到子流到点？我是新来的，我经常希望有一些全局对象，在那里我可以保存一些所有组件都需要知道的信息。当该全局对象中的数据发生变化时，它应该神奇地改变它注入的所有其他服务和组件。例如，用户登录/退出，或者如果他单击按钮等等。
import {Injectable} from 'angular2/core';
@Injectable()
export object Globals {
浏览 3提问于2016-02-03得票数 22
2回答
父亲对儿子的来文
、、、
我试图从父母到孩子的角度进行沟通，我想让孩子接收数据，形成一个按钮或卡片，并根据收到的数据，它将被程式化，但我不知道如何才能使分离
浏览 10提问于2022-10-10得票数 -1
我使用的是angular 2.0.0-rc.4。
我有一个表单(父组件)，我在其中有一些来自其他组件的下拉列表，每个下拉列表都有ts和html template，每个下拉列表都从其组件中获取数据。提交表单时，我需要每个值的选择值。如何从父级访问它？
-Parent表单HTML：
<form class="" (submit)="submitNewModel($event, label.value)">
<div class="form-group">
<label for="label&#
浏览 0提问于2016-07-28得票数 1
我引用的是这个。
在文章中提到，angular2比angular1更快的原因是因为angular2具有构建单向变化检测树的能力。
我不明白的是，如果你有@output和eventEmitter，数据流本质上是非单向的，因为数据可以回流到它的父级。
例如
Child
@Component({
selector: 'Child',
inputs: ['myfullname'],
outputs: ['changefirstname']
})
@View({
template: `
<div (click)="ch
浏览 0提问于2016-04-06得票数 1
我试着创建一个按钮，给我一个点击弹出窗口。弹出窗口包含一个表单，可以让我键入任何新条目。在提交时，条目应该被传递到主组件。 我有两个组件。主要组件是'App‘组件，另一个组件是'Popup’组件。 下面是我的代码： App.js import React, { Component } from "react";
import Popup from "./Popup.js";
import "./styles.css";
class App extends Component {
showPopup = false;
浏览 26提问于2020-09-12得票数 0
回答已采纳
我正试着在ReactJs中做一些类似手风琴的事情。现在我有3个组件：<TableList>、<TableListGroupRow>、<TableListRow>
在List render方法中，我将GroupRows和行推入一个数组，然后再呈现该数组。
//one group row for example
var group;
tableRows.push(
group =
<TableListGroupRow
onClick={
浏览 0提问于2016-07-01得票数 2
1回答
我试着在这里看过一些类似的问题，但是找不到解决问题的方法。
这里有一个倒计时@指令()，它接收一些输入并进行计数。倒计时部分起作用，但我遇到了一个问题，在进入下一个倒计时之前，所有的选择器都在运行/发出相同的数字。我如何让他们分开倒计时，使用他们自己的参数，并同时运行？
app.component.ts中的run()代码
run() {
var _this = this;
clearInterval(_this._timer);
var counting = 0;
var incrementFactor = 0;
var increment = 1;
浏览 3提问于2016-08-29得票数 0
回答已采纳
我有一个组件，它生成一个按钮列表，我想绑定click事件来显示子组件。我让它为单个按钮/组件工作，但它使用了一个局部变量，每个按钮的值相同，因此不能正确工作：
<div *ngFor="let key of keys">
<button (click)="child.toggleCollapse()">
Display
</button>
<app-child-component #child [key]="key"></app-child-component>
&l
浏览 0提问于2017-07-26得票数 0
48回答
我在看“反应”课程，老师说道具不应该换。我现在正在读道具和状态的，上面写着
道具和状态更改都会触发呈现更新。
这篇文章的后面写道：
道具(属性的缩写)是一个组件的配置，如果可以的话，它的选项。它们是从上面接收的，是不变的。
所以道具可以改变，但它们应该是不变的？
什么时候应该使用道具，什么时候应该使用状态？
如果您有React需要的数据，是通过支持还是通过getInitialState在React组件中设置？
浏览 0提问于2015-01-16得票数 739
回答已采纳
我希望从我的路由组件接收事件，并将数据从父组件传递到它们。
内容-应用程序-模板：
<router-outlet [data]='data' (selected)="selected($event)"></router-outlet> //this is not working
“content”组件应该接收来自路由组件的事件(例如“内容-app-列表”)
<content-app> // this is where the events should arrive
<content-app-header>
浏览 3提问于2016-12-16得票数 1
回答已采纳
2回答
我有一个父组件和一个子组件，其中父组件是使用*ngFor重复的子组件的列表。
每个子对象都通过“角”的@输入特性接收对象，子模板是一个使用角2方式绑定的表单，允许您编辑对象属性。
父类不一定是子组件的通用容器/列表，也不用于其他列表。
父服务器使用注入的服务检索正在使用的数据列表。
我的问题是，应该在保存表单时调用更新函数吗？应该注入服务并调用服务上的更新函数吗？是否应将其传递给要更新的父级？孩子应该从一开始就读吗？
我知道这可能会引发一些固执己见的答案，所以我正在寻找一个答案，这个答案符合角质团队的最佳实践意图，也符合这个标准：
在可读性、性能和设计之间均匀分布。
浏览 5提问于2017-09-12得票数 0
回答已采纳
我刚开始学习Angular2，遇到了@Input和@Output。两者之间的区别是什么？
浏览 0提问于2016-10-17得票数 12
我已经进入了角7的几个星期，在同一个父组件中的一个单独的子组件<app-child-2>上单击事件之后，我很难在父组件<parent>中隐藏/显示一个子组件<app-child-1>。
所有的子卡div只有呈现如果他们有数据，这是通过一个来自父shouldCardRender()和outputsMapToRead('Child 1')的ngIf方法完成的。shouldCardRender()方法用于在显示数据对象groupName之前，通过父方法this.checkIfCardHasAnyCheckedValues()中的另一个方法检查数据对
浏览 0提问于2019-03-16得票数 0
1回答
我有一个表单，这个表单对于一个组件来说太复杂了。
所以我为表单的一部分做了一个分段，它有多个动态输入，给出一个输出并验证自己。它没有提交按钮，在每次更改时，它只返回计算的结果，如果它被验证成功与否。
// Contains multiple input fields, passes its result when
// filled in properly and errors if not filled in properly
// so I can disable the submit button.
// Also contains a clear m
浏览 1提问于2019-11-29得票数 1
回答已采纳
我目前正在使用VueJS进行一个项目。
简单地说，我有一个项目列表，这些项包含一个名为color的属性。
当我单击列表中的某一项时，项目的属性就会出现，因此color属性将由着色器()显示。
问题是，我有一个父组件，其中调用了颜色选择器组件，但这不是直接调用的v-swatches组件，而是一个自定义组件。
ColorPicker.vue (自定义子组件)
<template>
<div>
<v-swatches v-model="color" v-on="listeners"></v-swatches>
浏览 1提问于2020-07-08得票数 1
回答已采纳
我正在编写一个模块，其中包含三个独立的组件。这些组件一起工作，所以使用服务来帮助跟踪一切是有意义的。
|
|- wrapper.component.ts
|
|- wrapper.service.ts
|
|- wrapper.module.ts
|
|- child-component1.component.ts
|
|- child-component2.component.ts
问题是，如果在应用程序中创建基本组件的两个实例，则服务在组件的两个实例之间共享数据。
在兄弟姐妹之间共享数据而不在组件的所有实例之间共享数据的正确方法是什么？
浏览 5提问于2017-09-08得票数 4
回答已采纳
我是React开发方面的新手。我有一个产品列表，我试图在我的slug.js文件中显示所选产品的ID，这是包含我的产品详细信息的JSX文件
这是我的ProductCard，我可以从这个页面检索产品的ID，我无法将它发送到另一个页面，这是我的slug.js，包含我的产品详细信息的JFX，任何帮助都是非常感谢的。
我希望将myChosenProduct const值传递给slug.js文件的参数。
export default function ProductCard({ data, label }) {
const productData = {
id: data.id,
pr
浏览 2提问于2022-01-27得票数 0
回答已采纳
您能告诉我，如何将state值从子组件child复制到Parent parent吗？子组件实现按钮上状态的递增和递减。该值也应显示在Parent中。谢谢! import React, {useState} from 'react';
import Child from "./Child";
const Parent = () => {
const [value, setValue] = useState(0);
return (
<>
<span>{value}</s
浏览 29提问于2021-08-21得票数 0
我是angular2的新手。试图更好地理解@Input的用法。我们可以使用@Input将值从父组件传递给子组件，还可以创建服务变量并将其注入父组件，并在子组件中访问它们。哪条路更好？我是通过路由解析得到这些值的。当没有用户输入绑定时，我对使用@Input表示怀疑。
浏览 4提问于2017-06-01得票数 2
回答已采纳
2回答
我正面临一个问题，这个问题已经被提到过几次了，但是像这样的解决方案：
我想以共享链接上的这个例子为例，让它变得简单：
让我们开始:首先，我在app.module.ts中有这些路线：
{path: 'dash/:project_id', component: DashProject, children: [
{path: '', component: null},
{path: 'task/form', component: TaskForm},
{path: 'task/:task_id', compone
浏览 4提问于2017-04-14得票数 1
回答已采纳
我对Angular2中的事件发射器有疑问。这真的是一个很好的功能，但是我想知道，我可以不从孩子到父母，而是从父母到孩子使用它。
在子代->父代模型中，我们在子组件中声明一些发射器，在html中设置发射点，我们设置(emitter)="parentFunc($event)"。
我们如何在模型父子模型中做到这一点呢？有可能吗？如果不是，我是否应该使用ViewChild？
致以问候。
浏览 0提问于2016-10-25得票数 1
我将有某种类型的列表作为一个组成部分，它的大小将改变，这取决于它目前有多少个孩子。不幸的是，这使得列表非常猛烈的跳跃。添加transition: 'all 0.3s ease'当然没有帮助，因为子元素的数量不会影响组件的样式，而只会影响网格。然而，我认为我比这更聪明，并且以任何一种方式破解它的风格：
render() {
return (
<div
style={{
width: Object.values(this.props.children).reduce((a,b) => a?.
浏览 3提问于2021-05-04得票数 3
回答已采纳
1回答
我想从父组件的img标记调用postDetails的toggleDetails方法，但我似乎不知道如何让它工作。 父级： <div v-for="post in loggedInUser.posts" :key="post._id">
<postDetails :post="post"></postDetails>
<img @click.prevent="toggleDetails" class="grid-item" :src="
浏览 3提问于2020-04-30得票数 1
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
谢谢你的帮助！
如果我有一个容器组件，它有两个子组件:工具栏和数据
Container
- Toolbar
- Data
现在，容器调用API来获取数据，数据作为道具传递给工具栏和数据组件。
比如说，工具栏有一个“发布”按钮，当按下该按钮时，需要调用API来更新数据，2)重新发布数据组件
我的问题是:如果Toolbar组件直接调用API，然后让容器知道数据已经改变了。或者，如果工具栏让容器知道调用了“发布”按钮，容器就会调用API (re:工具栏不应该通过调用API直接更改数据，容器应该处理所有调用)。我认为让容器处理所有数据更改是更合适的答案，因为它允许容器控制状态/处理错误并正确
浏览 2提问于2019-09-19得票数 3
回答已采纳
所以我得到了下面这段令人惊叹的代码。但我只有一个关于这条线的问题
.subscribe(this.incrementingDisplay.display$);
这会将值推入
@Output() display$ = new Subject()
效果很好..。但是，我想知道它为什么会工作，因为display$是一个@输出，那么它如何接收来自this.incrementingDisplay.display$的输入
再一次，一切都在工作，只是试图理解它应该是一个@输入，而不是显示的@输出
代码如下：
console.clear();
import {Component, Output, ViewC
浏览 0提问于2016-06-16得票数 1
2回答
当我学习时，人们总是说您应该将状态保持在父组件中，并将它们作为道具传递给其子组件。
但在现实世界中，每当我开始构建一个react应用程序时，我最终都会将数据从子组件传递给它的父组件。
例如，如果我必须在我的react应用程序中实现一个表单，我会为它创建一个额外的组件(例如，FormComponent)并将它导入到我的FormComponent中。
但是现在，我必须将表单数据从FormComponent传递给App组件。换句话说，从子组件(FormComponent)到父组件(App组件)。
这只是一个例子。--通常，我总是在这样的情况下结束:我必须将数据从一个孩子传递给父级，而不是通过传递。
浏览 7提问于2020-07-06得票数 4
我在处理一个在登录时不刷新的组件时遇到困难。
组件是navbar.component，它包含指向我的页面/组件的链接。在上面有一个“登录”链接，它呈现login.component，我可以在该链接上提供用户名和密码，然后单击登录按钮。login.component使用user.service，它用login.component提供的用户名和密码调用后端，存储接收的令牌并重定向到'/‘。
此时，应该隐藏navbar.component上的“登录”链接，并显示“注销”链接，但在单击导航栏上的其他链接之前不会发生任何事情。
这两个链接如下：
<a [hidden]="userS
浏览 0提问于2016-05-04得票数 6
回答已采纳
我有一个登录页，其中包含一个标志。我正在尝试让这个徽标触发状态值的更改。这样做的目的是在单击时从登录页面更改为主页。我已经设置它，使登录页面在一个确定的时间清楚，但我想做这一点上点击。这是我的splash.js文件，其中包含单击功能以及徽标和登录页面：
import React, { Component } from 'react';
import Woods from './woods.jpeg';
import Logo1 from './whitestar.png';
export default class Splash extend
浏览 0提问于2017-06-01得票数 0
为了维护和开发一个网站，我将在XAMPP上的测试环境中本地运行该网站。XAMPP运行得很好，但是当我尝试包含一些html时，显示的文本没有css。图片也无法加载。我检查了XAMPP的设置，但没有找到任何东西。我是否遗漏了XAMPP中的一些设置？让我对此感到疑惑的是，这些完全相同的文件已经在生产环境中运行，没有任何问题。
我正在做的工作包括：
<?php
header("content-Type: text/html; charset=utf-8");
include('html/frontpage.html');
?>
这个html包含了
浏览 8提问于2021-02-21得票数 0
我希望你一切都好。实习生在这里，只是从前端开发开始，所以很抱歉如果问题很愚蠢，或者代码看起来很糟糕(非常欢迎任何修改)。
我在Datatable中有一个Dropdown元素：
<p-dataTable [value]="Items">
<p-column field="Destination" header="Destinos">
<ng-template let-col let-item="rowData" pTemplate="body">
浏览 0提问于2017-05-31得票数 0
在父组件中设置为默认类扩展组件：
renderChildren() {
let children = Mongo.Collection.find().fetch(); // array of objects
return children.map((child) => (
<Child key={child._id} child={child} />
));
}
<Parent>
{this.renderChildren()}
</Parent>
..。在子组件中
toggleStatus() {
//changes th
浏览 3提问于2017-03-16得票数 0
回答已采纳
一旦在某个组件中定义了ChangeDetectionStrategy选项，它在应用程序组件树中的所有后代组件中都是决定性的吗？也就是说，如果它在某个组件中定义为ChangeDetectionStrategy.OnPush，那么它的所有后代组件都会有这种行为吗？谢谢。
浏览 1提问于2016-08-17得票数 0
我一直在为聊天显示编写一个简单的自动滚动指令：
@Directive({
selector: "[autoScroll]"
})
export class AutoScroll {
@Input() inScrollHeight;
@Input() inClientHeight;
@HostBinding("scrollTop") outScrollTop;
ngOnChanges(changes: {[propName: string]: SimpleChange}) {
if (changes[&#
浏览 5提问于2016-03-25得票数 2
回答已采纳
我有两个组件，我希望内部组件扩展外部组件样式
@Component({
selector: 'parent',
style: [ '.panel{width:100px;height:100px;border:1px solid #ccc}' ],
template: 'parent'
})
class ParentComponent
{
}
@Component({
selector: 'child',
template: '<div class=".panel
浏览 15提问于2017-01-10得票数 2
回答已采纳
1回答
当您路由到另一个组件时，如何保留初始状态？
假设您有一个电子商务站点，其中包含用户在结账时的购物车信息。现在，用户决定转到主页。购物车信息如何传递才不会丢失？
浏览 1提问于2020-04-25得票数 0
我的问题很普遍，但要找出我的例子有什么问题并不容易。我有嵌套组件父->Child2 1->Child2 2。状态和setState在道具中传递给子组件。在父组件更新时，我希望避免在子组件中重新呈现，并且在只更改一个项时，我希望避免重新呈现整个列表。
这是我的示例，您可以看到，当我更改父级标题或Child1中的描述时，Child2不会重新呈现，但是当我在Child2中更改状态时，会重新呈现整个列表，另外还有一些状态更新的副作用。
父组件。它包含了标题和。对于Child1 onChange，我接收我想要在状态和值中更新的道具。我使用useCallback钩子来避免在子组件中进行额外的重
浏览 8提问于2022-08-29得票数 0
在ReactJS树中可以深入到多深？假设我们有：
function SplitPane(props) {
return (
<OtherCompo>
{ props.left }
</OtherCompo>
);
}
function App() {
return (
<SplitPane
left={ <Contacts /> } />
);
}
如果我们想要从App组件转到最后一个子组件(并修改道具)，我们可以使用
浏览 1提问于2017-10-18得票数 2
我想用来自另一个组件的angular2标记将html注入到我的a组件中。
@Component({
selector: 'app-root',
template: '<app-a [my-html]="my-html"> </app-a>',
styleUrls: ['./app.component.css']
})
export class AppComponent {
my-html= '<span> {{variableFromAComponent}}</sp
浏览 3提问于2017-01-05得票数 2
回答已采纳
1回答
父组件：
{this.state.Child2 ? (
<Child2 Colorvalue={this.state.activeColor} somename={this.state.name} />
) : (
<Child1 somename={this.state.name} Colorvalue={this.state.activeColor} />
)}
在child1 & child2组件中，我都添加了一个对actioncreator (api调用)的调用，以获得一些信息--在ComponentWillMount方法中--一切都正常。
th
浏览 2提问于2016-11-20得票数 0
回答已采纳
2回答
请为我的申请考虑下面的图表。
EventsHub是一个简单的可注入服务：
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class EventsHub {
private announcementSource = new Subject<string>();
messageAnnounced$ = this.announcementSource.asObserva
浏览 0提问于2016-06-26得票数 5
回答已采纳
我希望创建这样一个组件：
<OptionContainer>
<Option value={value1} />
<Option value={value2} />
<Option value={value3} />
</OptionContainer>
我可以以某种方式访问容器组件中的选项值吗？问题是容器作为子对象接收选项(就像已经创建的对象一样)，不能将任何东西传递给道具。有什么解决办法吗？
浏览 0提问于2021-07-28得票数 1
回答已采纳
2回答
我有一个父组件，它使用子组件。我在父Css文件中编写了必要的样式，当我们将鼠标悬停在div上时，样式将相应地更改。子组件没有访问父组件的样式类。
有一个解决方案可以做到这一点，使用encapsulation: ViewEncapsulation.None，但是当我使用它时，我的整个样式都被干扰了。
还有没有别的办法呢？
柱塞示例：
子组件：
import {Component} from '@angular/core';
@Component({
selector:'testapp',
template: `
<a href=&
浏览 1提问于2016-08-10得票数 0
2回答
所以我有一个上传页面上传，它有一个子组件弹出，这是一个弹出菜单。这里的目标是单击上传页面上的提交按钮，并更改弹出组件的CSS属性以使其可见。我对ReactJS还很陌生，我还没能找到一个问题让我找到我需要去的地方。
这是上传页面组件。具有带有submit() onClick的按钮：
class Upload extends React.Component {
constructor(props) {
super(props);
this.state = {
submitted: false,
};
thi
浏览 0提问于2018-04-07得票数 0
回答已采纳
1回答
如何从指令注册到Angular2中组件的输入？
具体地说，我已经知道了，但我想在没有父母包络的情况下这样做。
我有来自Angular2站点的这段代码，但我无法让它工作以将数据发送到组件：
// Directive
import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';
@Directive({ selector: '[dirTest]' })
export class dirTestDirective {
@Output() refres
浏览 0提问于2017-06-04得票数 2
我想使用angular2构建一个可扩展的下拉列表。在onClick上，dropdown将扩展，而onBlur dropdown将收缩。
我能想到的实现此行为的唯一方法是保留一个跟踪状态的变量。
@Component({
selector: 'dropdown',
pipes: [SearchPipe],
template:
`
<div (blur)=updateState(false)>
<input [(ngModel)]="searchText" placeholder="name" (c
浏览 1提问于2016-04-05得票数 3
我有一个人SKSpriteNode雪碧。他正用手捡起一个苹果，这大约是他身高的一半(雪碧的右中边缘)。我应该让这个苹果成为雪碧的孩子，还是应该在每次更新时手动计算位置？
浏览 1提问于2017-06-23得票数 0
回答已采纳
3回答
有一个Parent组件，它包含一个Child组件。
Parent应该加载数据(例如使用AJAX)并更新Child 输入。
Child应该监听对其输入的更改，并更新输入以及。
设置Child 道具从Parent设置输入值：
<input value={this.props.someVal}
但是这使得它无法自我更新child，因为为了自我更新它的输入，它必须使用：
<input value={this.state.someVal}
这是否意味着Child必须侦听输入更改并触发将设置其props的Parents处理程序-函数？
我认为设置组件、道具-自动更新相应的状态
浏览 0提问于2018-01-18得票数 0
回答已采纳
我正在尝试获取一个包含多个对象信息的json文件，但似乎无法正确获取。我是个新手，所以我有可能把状态和道具之类的东西搞混了。
我已经成功地从控制台中的json接收到了对象列表，但是我无法在我的return语句中显示它们。
感谢您的帮助！
import React from 'react';
import ReactDOM from 'react-dom';
class PlayerFeed extends React.Component {
constructor(props) {
super(props);
this.
浏览 2提问于2018-07-31得票数 0
在我的Angular 4项目中，我从父组件传递了一个值，该值是通过服务调用传入的。子组件正在接收该值，并且在我的HTML中也可用。但是当我在我的子组件typescript文件中安慰传递的值时，它显示为undefined。
下面是我的代码片段：
restaurantlayout.component.ts (主元件ts文件)：
import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Restau
浏览 2提问于2018-05-04得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
