当parent在parent oninit期间运行时，角形子组件未初始化
是因为在Angular中，父组件的OnInit生命周期钩子函数会在子组件的构造函数之前执行。这意味着当父组件的OnInit函数执行时，子组件的构造函数还没有被调用，因此子组件还未初始化。
这种情况可能会导致父组件在OnInit期间尝试访问子组件的属性或方法时出现错误，因为子组件还没有完全准备好。
为了解决这个问题，可以使用Angular的生命周期钩子函数ngAfterViewInit来确保在父组件的OnInit期间子组件已经初始化。ngAfterViewInit会在子组件的视图初始化完成后被调用，此时可以安全地访问子组件的属性和方法。
以下是一个示例代码：
import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<app-child></app-child>
`
})
export class ParentComponent implements OnInit, AfterViewInit {
@ViewChild(ChildComponent) childComponent: ChildComponent;
ngOnInit() {
// 在这里访问子组件的属性或方法可能会导致错误
// 因为子组件还未初始化
}
ngAfterViewInit() {
// 在这里访问子组件的属性或方法是安全的
// 子组件已经初始化完成
console.log(this.childComponent.someProperty);
this.childComponent.someMethod();
}
}在上面的示例中，通过@ViewChild装饰器获取了对子组件的引用，并在ngAfterViewInit函数中访问了子组件的属性和方法。这样可以确保在父组件的OnInit期间子组件已经初始化，避免了错误发生。
请注意，以上示例中没有提及具体的腾讯云产品和链接地址，因为在这个特定的问题中与云计算相关的产品和链接并不适用。如果您有其他关于云计算的问题，我将很乐意为您提供相关的腾讯云产品和链接信息。
相关·内容
我在AngularConnect 2017的YouTube上看到了Kara的角形态演示。我特别感兴趣的是
正如卡拉所描述的，我已经做了所有的事情，但是无论我尝试什么，我最终都会得到一个null parentForm。
我在下面复制了我的代码的简化版本。问题是，在child-form组件中，我得到了null。
//父组件
@Component({
selector: 'parent-form',
styleUrls: ['./parent-form.component.css'],
template: `
<form [formGroup
浏览 1提问于2018-02-26得票数 4
回答已采纳
3回答
我使用组件工厂动态生成动态组件。工厂被传递一个数据数组，包括生成的组件的输入参数：
<app-field-factory [componentData]="componentSeedData"></app-field-factory>
这很好，“字段工厂”组件处理数据。在每个生成的组件中，我都有如下所示：
export class TextInputComponent implements OnInit {
@Input() id: number;
@Input() field_name: string;
@Input() parent:
浏览 1提问于2017-10-30得票数 5
回答已采纳
1回答
组件交互@Input
、、、、
我想要一个组件发送输入到另一个组件。下面是.ts和.html的代码。这两个组件中。现在的问题是父组件的html页面也显示子组件的html部分……我希望组件只将一个字符串传递给子组件
Parent.ts
import ...
@Component({
selector: 'app-parent',
templateUrl: './parent.html',
styleUrls: ['./parent.css']
})
export class ParentComponent implements OnInit {
sostegn
浏览 1提问于2019-03-04得票数 2
2回答
我试图将数组传递给子组件。数组是在父组件的onInit生命周期钩子的订阅方法中定义的。
父组件：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'selector-parent',
templateUrl: 'parent.component.html'
})
export class ParentComponent implements OnInit {
array: [];
constructor() { }
n
浏览 0提问于2018-09-10得票数 0
回答已采纳
month-detail.component.html
import ...
@Component({
template: `{{month?.id}} <app-month-date [month]="month"></app-month-date>`
})
export class MonthDetailComponent implements OnInit {
month: Month;
ngOnInit(): void {
this.route.params
.switchMap((params: Params)
浏览 1提问于2017-11-28得票数 3
回答已采纳
1回答
我有两个组成部分，父母和孩子的关系。父组件的ngOnInit方法检查用户是否已登录，是否未登录，是否导航到登录页面。
class ParentComponent implements OnInit{
ngOnInit(){
if(!authService.loggedIn){
//navigate to login screen code
return;
}
}
}
class ChildComponent implements OnInit{
ngOnInit(){
/**
浏览 3提问于2017-05-08得票数 0
回答已采纳
使用Controller1和Controller2有什么区别吗？
angular.module('app', [])
.component('foo', {
templateUrl: 'foo.html',
bindings: {
user: '<',
},
controller: Controller1, //Or Controller2
});
function Controller1(){
this.$onInit = function(){
thi
浏览 2提问于2017-01-10得票数 5
我创建了一个来测试新的react，但这是错误的。我跟踪了，但我不知道出了什么问题。有人能看一下密码吗。
“反应”："16.5.2"，
“反应”："16.5.2"，
父组件：
import React, { Component } from "react";
import ChildComponent from "./ChildComponent";
export default class ParentComponent extends Component {
constructor(props) {
sup
浏览 1提问于2018-10-10得票数 1
回答已采纳
2回答
我在子组件中使用了角8嵌套的反应形式，但它不起作用。我已经查过正式的角度文件，但找不到任何例子。
我的解决方案可以在上找到。我无法显示每个公司的companyName和每个地址的详细地址。有什么想法吗？
据Kara在“2017年角连接”上谈到的“角形式”，它应该是直接的.
她的视频在35:31-36:51之间
在parent.component.html中
<form [formGroup]="form">
<div *ngFor="let address of addresses">
<app-child
浏览 2提问于2020-02-14得票数 2
回答已采纳
这是我的密码
home-component.ts
export class HomeComponent implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
loading = false;
constructor() { }
ngOnChanges(changes: SimpleChanges): void {
console.log('--parent ngOnChanges--')
浏览 9提问于2022-06-30得票数 0
我正在尝试将数据从父传递给子。当我将字符串(data1)从父级传递到子级时，我得到了正确的输出，但是当我试图显示对象(数据)时，控制台表示它是未知的，屏幕上没有显示任何内容。
父组件：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class
浏览 3提问于2021-05-12得票数 1
我已经在Angular 6上工作了几个月，我有两个组件:第一个组件(parent)必须通过http请求读取一个参数并初始化内部属性；第二个组件(孩子)在自己的属性上使用@Input装饰器来接受这个参数。我无法在subscribe方法中设置父属性，该属性未定义。有什么建议吗？ 父组件： export class DeliberaComponent implements OnInit {
private categoria: string = 'delibera';
private prefix: string;
constructor(private siste
浏览 20提问于2019-04-11得票数 0
4回答
仅当子组件完成http调用时，我才希望在父组件中呈现子组件，但它对我不起作用，子组件不显示.
child selector in parent component
<app-child-component *ngIf="alert" (alert)="propagar($evento)"></app-child-component >
export class ParentComponent implements OnInit {
alert = false;
propagar(evento: boolean) {
浏览 2提问于2021-09-14得票数 2
回答已采纳
我有以下父组件和子组件，并且我将数据从父组件传递到子组件。我在子组件(如果是parentData.name )中显示parentData.isFolder===false，并试图重用子组件(如果是parentData.isFolder===true )。我想多次使用同一个子组件，直到我没有parentData.isFolder===true的数据为止。
我尝试了下面的方法
错误:超过最大调用堆栈大小
如果这不是实现这一目标的正确途径，还有其他方法吗？
parent-component.componet.ts
import { Component, OnInit } from '@an
浏览 3提问于2021-09-28得票数 0
回答已采纳
这个样本的目的是检查ChangeDetection。
当我试图使用@input属性将数据从主成分传递到子组件时(它是一个可观察的属性)，则会出现以下错误：
Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined
at changeDetectionChild
浏览 0提问于2018-03-28得票数 0
这是一个与角4相关的体系结构问题，以及如何在角加载子组件的情况下最好地初始化数据。
场景:我有一个带有数据表的父组件，当单击该表中的任何一行时，它将打开3个子组件中的一个(在侧栏视图中)，具体取决于您是否要向表中添加新项、编辑选定行或查看有关它的详细信息(基本CRUD功能)。IOTW，用户可以在父组件中使用数据表时重复调用相同的3个组件。
通过角度设计，子组件只在组件第一次使用时运行OnInit生命周期事件。因此，例如，如果我编辑第1行，“编辑”子组件运行它的onInit钩子组件，但是，如果我随后编辑第2行，编辑组件中的onInit将不会运行，因为该组件已经按照角度加载了。
为了每次用户想要编
浏览 1提问于2017-08-10得票数 1
为什么即使在ngOnChanges的值发生变化之后也不触发child_message？我看到当值从父传递到子时会触发ngDocheck()。但是，它被多次触发，不仅是在传递值时，而且在初始化组件时也是如此，我想要的是在初始化后更改值时触发的东西。
ParentComponent.ts
import { Component, OnInit,ViewChild,AfterViewInit, OnChanges, Input } from '@angular/core';
import { ChildComponent } from '../child/child.compo
浏览 1提问于2019-09-06得票数 0
1回答
我正在用angularjs实现一个简单的网格组件。我更喜欢html配置而不是javascript，因为这样视图代码和逻辑代码是分开的。 例如, <my-grid>
<my-column title="Name" field"name"></column>
<my-column title="Age" field"age"></column>
</my-grid> 我已经创建了一个需要my-grid组件的my-column组件。当控制器
浏览 18提问于2019-03-21得票数 0
回答已采纳
我有两个组件
父组件为
@Component({
selector: 'parent',
template: `
<child [obj]="obj"> </child>
`,
styleUrls: [''],
})
export class parentComponent implements OnInit{
obj = {
id:1;
name:'abc'
}
}
子组件是
@Component({
selector: 'child',
t
浏览 0提问于2018-08-22得票数 1
问题
我使用角5作为SPA。我有两个组成部分的父母子女。我从父组件中调用了一个API，并将该API的响应转换为Model。现在我想把这个模型传递给其他组件。我已经使用@Input来获取模型，但是它在视图中呈现，但没有捕捉到组件。当我console.log传递给我的那个模型时，它显示了我的未定义。
代码
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialog} from "@angular/material";
import {Spec
浏览 3提问于2018-05-18得票数 1
回答已采纳
2回答
我正在做一个项目，家长和孩子需要通过服务进行沟通。遵循正式文档中的，我无法使它工作。
这是我创建的服务：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class CommonService {
private _propertyChangeAnnouncedSource = new Subject<string>();
propertyChangeAnnounced$ = this._
浏览 0提问于2019-07-11得票数 1
回答已采纳
1回答
我对棱镜和打字很陌生。熟悉OOP和Javascript。我对如何做以下事情感到有点困惑：
我希望根据child组件中的变量在parent组件中创建和插入许多parent组件实例。我还想给出我从child传递给它的每个parent组件值。下面的代码给了我：Uncaught Error: Can't resolve all parameters for ParentComponent: (?, ?).，这让我很困惑，因为我传递了正确的参数数量和正确的类型？
Parnet组件：
import { Component, OnInit } from '@angular/core'
浏览 3提问于2017-11-05得票数 0
回答已采纳
我想要监听来自父组件的子组件上的单击事件，但该事件不会发送到父组件。
子组件：
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: './child-component.component.html',
})
export class ChildComponent implements OnInit {
@Output
浏览 27提问于2019-07-31得票数 1
我希望能够从内部销毁我的组件。(不是来自parent，因为它是在多个区域中动态创建的)。
我从angular的api中了解到他们有一个ComponentRef对象。我尝试过在构造函数中包含它，但是它说它需要一个参数，而我不确定要传递给它什么。
链接：
如何在我的组件中使用ComponentRef来销毁它？
import { Component, ComponentRef, OnInit } '@angular/core';
export class MyComponent implements OnInit {
constructor(private ref: Comp
浏览 19提问于2017-08-18得票数 18
3回答
我是Angular的新手，我尝试过使用可用的选项，但我仍然坚持如何使用parent中的templateUrl共享数据，以下是代码片段
header.component.html代码
<header><label>{{childMessage}}</label></header>
-- header.component.ts文件代码
import { Component, OnInit, Input } from '@angular/core';
import { HttpClientModule, HttpClient, Ht
浏览 0提问于2019-11-17得票数 0
在我的子组件中，单击一个按钮就会触发一个进程并返回一个布尔值。我需要在父组件中捕获这个布尔值，并启用/禁用一个按钮。我以前从未使用过@Output()。我已经创建了一个示例来显示这个问题。在开发工具中，我得到这个错误：
ERROR TypeError: _co.onclickValidateAndSave is not a function
child.component.ts
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
selector: &#
浏览 3提问于2019-03-01得票数 1
我有一个如下声明的组件，它接收一个输入数据。我使用的是Primeng日历组件，这个组件是它创建的，但我无法访问数据以将其传递给模板我收到一个错误(ngModel)="data.DateValue"，就像访问它时DataValue还不存在一样
遗漏了什么？
如何在接收到输入数据后设置Date类型的辅助值( myDateValue: Date )？
提前谢谢。
import { Component, Input} from '@angular/core';
import { DataType } from "../model/dataType";
浏览 8提问于2017-08-14得票数 0
回答已采纳
我得先把一些数据从孩子传给父母。在此之后，需要将相同的数据从此父级传递给另一个子级。
我做的第一件事是，我把一些数据从孩子发给父母。但是现在我需要把这个数据从这个家长发送到另一个孩子，我怎么能做到这一点。
这三个组成部分是，
parent1
child1
child2
子1组件ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child1',
templateUrl:
浏览 0提问于2019-07-31得票数 0
我是新的角，我一直在学习组件LifeHooks最近，我真的不了解一件事关于ngOnChanges。它是否只在子组件上触发？如果我使用这样的代码: app.component.ts：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Logger]
})
export class AppComponent implements O
浏览 0提问于2018-06-03得票数 0
回答已采纳
这是父组件:我将所有数据从parentComponent传递给主页面组件。
import { Component, OnInit } from '@angular/core';
import { Product } from '../Model/Product';
import { ProductService } from '../ProductsService/product.service';
@Component({
selector: 'app-parent',
templateUrl: './
浏览 16提问于2022-06-16得票数 3
回答已采纳
2回答
尽管多年来一直在使用WebForms，但我仍然不时地对事件的生命周期感到困惑。与其说这是一个需要解决的问题，不如说是希望能更好地理解为什么事情会以这样的方式运作。
假设您有一个表单：
Default.aspx：
<form>
<MyControls:UserControl1 runat="server">
</form>
UserControl1 1:ascx：
<MyControls:UserControl2 runat="server">
OnInit事件按以下顺序发生：
UserControl2_OnIn
浏览 9提问于2011-02-09得票数 6
3回答
我有一个父组件和一个子组件。父组件可以如下所示：
<button (click)="popupState = true>Click this to get a popup</button>
<popup-component [popupState]="popupState"></popup-component>
在ts文件中包含：
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'parent-
浏览 6提问于2022-05-24得票数 0
回答已采纳
在ResetPasswordComponent oninit中触发时，我在显示警报时遇到问题。AlertService的订阅块没有被触发，但是，如果我将代码从oninit移到构造函数中，它就会工作。但是，将初始化/声明代码放在构造函数中似乎不是一种好的做法。那么有没有更好的解决方案呢？
父级
export class ResetPasswordComponent implements OnInit {
public email: string;
public token: string;
constructor(public alertService: AlertService)
浏览 19提问于2020-02-08得票数 0
回答已采纳
如何通过在父视图中单击事件访问子组件中的函数。
我的父视图中有两个按钮，每个按钮代表一个组件。
<ul>
<li><button (click)="buttonOne()">component 1</button></li>
<li><button (click)="buttonTwo()">component 2</button></li>
</ul>
我想单击按钮组件1并显示组件1，当我单击按钮组件2时，隐藏组件1并显示组件
浏览 4提问于2018-01-04得票数 0
回答已采纳
4回答
我想在我的子组件Html页面中显示taxDetailsId。但是当单击submit按钮时。单击submit按钮后，在我的子组件Html页面中显示taxDetailsId。父组件
export class OnlinePaymentComponent implements OnInit {
HttpClient: any;
paymentForm: FormGroup = this.formBuilder.group({
taxDetailsId: ['', [Validators.required]]
});
浏览 5提问于2021-08-15得票数 2
我得到了一个角度父组件，它用于将对象传递给子组件，如下所示 export class ParentComponent implements OnInit {
viewModel = {} as MyViewModel;
constructor(private service: MyService) {}
ngOnInit() {
this.service.subscribe((data) => {
this.viewModel = data.fdForms.viewModel;
});
} 我通过html将填充的vie
浏览 43提问于2021-07-08得票数 0
5回答
最后字段的初始化
、、
有人能向我解释一下这个例子的行为吗？
package test;
public class Test {
static abstract class Parent{
public Parent() {
print();
}
public abstract void print();
}
static class Child extends Parent{
protected final int i= 10;
public Child() {
浏览 4提问于2013-12-11得票数 1
回答已采纳
我知道我必须使用@Input()装饰器，而且我正在这么做。但我使用的是异步操作。我的问题是，父级有时会将空数组或半填充数组发送给子数组。这是我的代码：
parent.component.ts
import { Component, EventEmitter, Output, OnInit, Input, OnChanges } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
...
@Component({
selector: 'app-
浏览 0提问于2021-02-15得票数 0
回答已采纳
无论其中的值是什么，打印出来都没有问题，但是使用@Input或@Output获得的任何值都不会显示。 child.component.ts @Component({
selector: 'app-form-input',
templateUrl: './form-input.component.html',
styleUrls: ['./form-input.component.scss']
})
export class FormInputComponent implements OnInit {
@Input() fi
浏览 29提问于2019-06-17得票数 1
回答已采纳
当我使用@ViewChild时，会得到组件未定义的错误。当我使用@ViewChildren时，会得到来自该组件的函数不是函数的错误。
我对在角中使用子组件很陌生，所以我不知道为什么要这样做，因为我在父组件中定义了子组件，并且它显然是子组件中的一个函数。
我不想定义父组件中的每个子函数，或者使用单独的组件有什么意义。
子组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mood',
templateUrl: './mood.compo
浏览 4提问于2022-01-26得票数 0
回答已采纳
构成部分：
import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
export class PatchListComponent implements OnInit {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {
openMo
浏览 3提问于2021-06-20得票数 1
回答已采纳
我在我的角度项目中使用Ag版本26.2.0。我参考了正式文档，并按照他们的建议实现了将父上下文传递给子组件的代码。我已经完成了所有的步骤，但是将父上下文作为未定义的。
我不知道我在这里错过了什么。任何帮助都是非常感谢的。
下面是代码片段：
父组件：
export class CartComponent implements OnInit {
public frameworkComponents;
context: any = { comp: this};
...
constructor(){
this.context = { parent: this };
}
...
}
组件ht
浏览 5提问于2022-01-28得票数 0
回答已采纳
2回答
我要删除子组件，父只会删除最后一个子组件，然后显示索引来自hostView -1，不能从视图中删除子组件。
这是我的孩子观
<button (click)="remove_me()" >I am a Child {{unique_key}}, click to Remove
</button>
这是我的孩子部件
import { Component } from '@angular/core';
import { ParentComponent } from '../parent/parent.component';
@
浏览 8提问于2022-12-03得票数 0
我正在尝试将数据从一个角度组件发送到另一个角度组件。 我已经设法通过sessionStorage做到了这一点，但我知道这不是最好的做法，因为它应该只包含与用户身份识别、日志记录等相关的数据。 在我看过的几个教程中，我必须通过EventEmitter通过html传递数据。在所有这些技术Sharing Data between Angular Components - Four Methods中都可以看到 但是，理想情况下，我想要做的是通过ts组件将数据从parent component传递到child component，以便能够直接在那里操作数据，然后决定如何在parent html中处理数
浏览 7提问于2020-09-16得票数 1
回答已采纳
父组件正确显示数据，但没有将异步填充的数据发送给子组件 我是Angular的新手，我从这个页面开始关注它的文档：https://angular.io/guide/component-interaction我能够使用Angular服务异步地将文件详细信息读入父组件。当我显示来自父组件的文件详细信息时，我可以看到文件被正确读取。当我使用@Output()变量传递数据并使用@Input在子组件中接收数据时，我得到的是空数据，就好像子组件同步而不是异步地接收输入一样。 以下是该服务： import { Injectable } from '@angular/core';
import
浏览 15提问于2019-09-07得票数 0
回答已采纳
1回答
我正在我的应用程序中构建设置，我们的设置页面有多个设置类别。为了管理这一点，我的设置页面如下：SettingsPage <uses> ProfileSettingsComponent <uses> SettingsComponent[]。我对孩子和孙子组件有问题。
我尝试将设置对象的一部分传入SettingsComponent，并将其绑定回父对象。现在，如果我传入设置属性，我得到的只是值，而不是属性的名称，属性也不会在父级上更新。
让我们来看一些代码。
ProfileSettingsComponent
import { Component, OnInit } from
浏览 14提问于2017-08-24得票数 1
回答已采纳
这是一个测试路由器触发事件的简单ts代码
import { Component, OnInit } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';
@Component({
selector: 'user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export cl
浏览 0提问于2017-11-08得票数 2
我有以下代码的父组件
<div class="parent">
parent >>>
<p>This my parent having child in it</p>
<div appChildDom >
<ng-content></ng-content>
</div>
</div>
子组件定义如下，
@Component({
selector: "div[appChildDom]",
template: "
浏览 6提问于2022-11-25得票数 0
2回答
我想这是个简单的问题，但我是新来的.
Sencha Touch中的“config”和“default”有什么区别？
浏览 5提问于2014-08-27得票数 1
回答已采纳
export class OrderDetailComponent implements OnInit {
isOpenReviewPDF: boolean;
@ViewChild(forwardRef(() => OrderReviewPdfComponent)) orderReviewPdfComponent: OrderReviewPdfComponent;
ngOnInit() {
}
pulic exportPdf() {
this.isOpenReviewPDF = true;
if (this.orderReviewPdfComponent.i
浏览 0提问于2018-10-27得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
