首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 4组件@Input ngOnInit未调用

Angular 4是一种流行的前端开发框架,它使用组件化的方式构建用户界面。在Angular 4中,@Input装饰器用于接收父组件传递的数据,并在组件内部使用。ngOnInit是Angular生命周期钩子函数之一,用于在组件初始化时执行一些操作。

对于问题中提到的情况,即ngOnInit未被调用,可能有以下几种原因:

  1. 组件未正确引入:请确保组件已正确引入到父组件中,并在父组件的模板中使用了该组件。
  2. @Input装饰器未正确使用:请检查@Input装饰器是否正确应用在组件的属性上,并且确保属性名称与父组件传递的属性名称一致。
  3. 组件未正确传递数据:请确保父组件在使用子组件时,正确传递了数据给子组件的@Input属性。
  4. 组件未正确初始化:请检查组件是否正确声明并在模板中使用。同时,确保组件的选择器正确匹配模板中的标签。

如果以上步骤都正确无误,但ngOnInit仍未被调用,可能是由于其他代码逻辑或配置问题导致。可以尝试以下解决方法:

  1. 检查组件的依赖项:确保组件所需的依赖项已正确引入,并在组件的构造函数中进行注入。
  2. 检查Angular版本兼容性:请确保使用的Angular版本与组件的版本兼容。有时,不同版本的Angular可能存在一些差异,导致某些生命周期钩子函数无法正常调用。
  3. 检查其他代码逻辑:请检查组件内部的其他代码逻辑,确保没有其他地方导致ngOnInit未被调用。

总结起来,当Angular 4组件的@Input属性未能正确接收父组件传递的数据,并且ngOnInit未被调用时,我们需要检查组件的引入、@Input装饰器的使用、数据传递、组件初始化等方面的问题。如果问题仍然存在,可以进一步检查依赖项、版本兼容性和其他代码逻辑。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

高级 Angular 组件模式 (4)

命名冲突不仅存在于指令的选择器之间,同时也会存在于指令的Inputs和Outputs属性,当这些属性名一样时,Angular并不会进行提示,它会按原本的逻辑正常工作。...Angular官方提供的规范指南也警示了这一点,当你在使用prefix修饰指令的名称时,也需要注意使用prefix来修饰Input和Output属性的名称。...Note: 当使用Output属性重写原生DOM元素的事件和使用Input属性重写原生元素的属性时,请额外注意,没有任何方式可以获知别人在他们编写的应用或者库中使用的命名,但是你可以很轻易的知道的具体命名的大体规则是什么...增加prefix的一种方式是在每个指令的label属性的装饰器内增加一个字符串参数,如下: // In withToggle.directive.ts @Input('withToggleLabel'...) label; // In toggle.directive.ts @Input('toggleLabel') label; 但是这种解决方案的前提时,你至少能够更改存在命名冲突中的一个或多个指令的源码

76710
  • Angular constructor vs ngOnInit

    ngOnInitAngular 组件生命周期中的一个钩子,Angular 中的所有钩子和调用顺序如下: ngOnChanges —— 当数据绑定输入属性的值发生变化时调用 ngOnInit ——...—— 组件每次检查内容时调用 ngAfterViewInit —— 组件相应的视图初始化之后调用 ngAfterViewChecked —— 组件每次检查视图时调用 ngOnDestroy —— 指令销毁前调用...其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件,该钩子方法会在第一次 ngOnChanges 之后被调用。...另外需要注意的是 ngOnInit 钩子只会被调用一次,我们来看一下具体示例: import { Component, OnInit } from '@angular/core'; @Component...因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后在调用 ngOnInit 钩子方法,所以在

    1.4K20

    AngularDart 4.0 高级-生命周期钩子 顶

    例如,OnInit接口有一个名为ngOnInit的钩子方法,Angular在创建组件后立即调用: lib/src/peek_a_boo_component.dart (ngOnInit) class PeekABoo...在ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用ngOnInitAngular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。...在每次更改检测运行期间,立即在ngOnChanges和ngOnInit之后调用。 ngAfterContentInit 在Angular将外部内容投影到组件的视图之后进行响应。...当ngOninit运行时,它们将被设置。 ngOnChanges方法是您第一次访问这些属性的机会。 在ngOnInit之前Angular调用ngOnChanges ...并在此之后多次调用。...它只调用一次ngOnInit。 您可以期待Angular在创建组件后立即调用ngOnInit方法。 这就是深度初始化逻辑所属的地方。

    6.2K10

    Angular 的生命周期

    这是我参与「掘金日新计划 · 4 月更文挑战」的第16天, 接触过 react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们在使用 angular 开发的过程中,是避免不了的。...ngOnChanges 当我们有外部参数更改的时候,我们就会执行 ngOnChanges,也就是说组件中有 @Input 所绑定的属性值发生改变的时候调用。...简单说,父组件绑定子组件中的元素,会触发这个钩子函数,可以多次出发。这在下面的 ngOnInit 总会介绍。 ngOnInit 这个方法调用的时候,说明组件已经初始化成功。...() { console.log('3. demo ngOnInit') } } 当通过 @Input 将值传递给子组件 demo 的时候,就会触发 demo 组件中的 ngOnChanges...当 @Input 传递的属性发生改变的时候,可以多次触发 demo 组件中的 ngOnChanges 钩子函数。 <!

    90020

    Angular 从入坑到挖坑 - 组件食用指南

    (): void { } } title:{{title}} 1+2+3+4+5={{1+2+3+4+5}} ?...在子组件中引入 Inupt,同时使用 @Input 装饰器来接收父组件传递的数据 // 引入 Input 接口 import { Component, OnInit, Input } from '@angular...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来在构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...ngAfterContentInit 组件内容渲染完成后调用一次 ngAfterContentChecked 只要组件的内容发生改变就会被调用 ngAfterViewInit 视图加载完成后触发一次,...一般用来对视图的 dom 元素进行操作 ngAfterViewChecked 视图发生变化时调用,在组件的生命周期中会调用多次 ngOnDestroy 只在销毁组件调用一次,一般用来在组件销毁前执行某些操作

    15.8K30

    详解ANGULAR2组件中的变化检测机制(对比ANGULAR1的脏检测)

    组件和变化检测器 如你所知,Angular 2 应用程序是一颗组件树,而每个组件都有自己的变化检测器,这意味着应用程序也是一颗变化检测器树。顺便说一句,你可能会想。是由谁来生成变化检测器?...变化检测策略 在 Angular 2 中我们可以在定义组件的 metadata 信息时,设定每个组件的变化检测策略。...detach() - 从变化检测树中分离变化检测器,该组件的变化检测器将不再执行变化检测,除非手动调用 reattach() 方法。...我们看到在 ngOnInit 钩子中,我们通过 setInterval 定时器,每隔一秒钟更新计数值同时调用 ChangeDetectorRef 对象上的 markForCheck() 方法,来标识该组件在下一个变化检测周期...当复选框被选中时,detach() 方法将被调用,之后组件及其子组件将不会被检查。当取消选择时,reattach() 方法会被调用,该组件将会被重新添加到变化检测器树上。

    2.9K90

    Angular 从入坑到挖坑 - 表单控件概览

    从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,..." required minlength="4"> 年龄: <input...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件的 getter 方法,从而在模板中通过此方法来获取到指定控件的状态信息 import { Component, OnInit...,我们需要继承 Validator 接口 import { Directive, Input } from '@angular/core'; import { AbstractControl, Validator

    18.9K20

    Angular 6.x 基础教程

    调用我们的事件处理函数时,会自动帮我们处理调用的参数。...以上代码中, (keydown.enter)="onEnter($event, myInput.value)" 表达式表示我们监听键盘 enter 键的按下事件,当我们按下键盘的 enter 键时,将会调用组件类中定义的...第七节 - 使用 Input 装饰器 为了让我们能够开发更灵活的组件Angular 为我们提供了 Input 装饰器,用于定义组件的输入属性。...使用 Input 装饰器 更新 SimpleFormComponent 组件 import {Component, OnInit,Input} from '@angular/core'; @Component...当在 SimpleFormComponent 组件中修改 input 输入框的文本消息后,点击更新按钮,将会调用 AppComponent 组件类中的 onUpdate() 方法,更新对应的信息。

    15.6K20

    Angular快速学习笔记(3) -- 组件与模板

    在这种模式下,有类型的变量默认是不允许 null 或 undefined 值的,如果有赋值的变量,或者试图把 null 或 undefined 赋值给不允许为空的变量,类型检查器就会抛出一个错误 Angular...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个 Angular 变更检测周期中调用,ngOnChanges() 和 ngOnInit() 之后。...在 Angular 销毁指令/组件之前调用 OnInit钩子 使用 ngOnInit() 有两个原因: 在构造函数之后马上执行复杂的初始化逻辑 在 Angular 设置完输入属性之后,对该组件进行准备...angular/core'; @Component({ selector: 'app-voter', template: ` {{name}} <button

    15.3K30

    Angular 英雄编辑器

    接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。...ng generate component heroes CLI 创建了一个新的文件夹, src/app/heroes/,并生成了 HeroesComponent 的 4 个文件。...ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...Angular 发布了一些内置管道,当然你还可以创建自己的管道。 编辑英雄 用户应该能在一个  文本输入框(textbox)中编辑英雄的名字。...也就是说,数据流从组件类流出到屏幕,并且从屏幕流回到组件类。 要想让这种数据流动自动化,就要在表单元素  和组件的 hero.name 属性之间建立双向数据绑定。

    2.6K70

    Angular 英雄编辑器

    接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。...ng generate component heroes CLI 创建了一个新的文件夹, src/app/heroes/,并生成了 HeroesComponent 的 4 个文件。...ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...Angular 发布了一些内置管道,当然你还可以创建自己的管道。 编辑英雄 用户应该能在一个  文本输入框(textbox)中编辑英雄的名字。...也就是说,数据流从组件类流出到屏幕,并且从屏幕流回到组件类。 要想让这种数据流动自动化,就要在表单元素  和组件的 hero.name 属性之间建立双向数据绑定。

    2.5K50

    Angular2 -- 生命周期钩子

    比如,OnInit接口的钩子方法叫做ngOnInit。 指令和组件 ngOnInit:当Angular初始化完成数据绑定的输入属性后,用来初始化指令或者组件。...ngAfterContentChecked:当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。 ngAfterViewInit:在Angular创建完组件的视图后调用。...ngAfterViewChecked:在Angular检查完组件视图中的绑定后调用。...生命周期的顺序 ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit之前。 ngOnInit:在第一轮ngOnChanges完成之后调用。...ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。 ngOnDestroy:当Angular每次销毁指令/组件之前调用

    77420
    领券