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

任何在Angular 6中自动调用函数的方法,看起来ng-init都不起作用

在 Angular 6 中,ng-init 指令已被弃用,因此不建议使用它来自动调用函数。相反,你可以使用 Angular 的组件生命周期钩子来实现这个功能。

以下是在 Angular 6 中自动调用函数的几种方法:

  1. 使用 ngOnInit 生命周期钩子:

在组件类中,你可以使用 ngOnInit 生命周期钩子来自动调用函数。ngOnInit 会在组件初始化时自动调用。

代码语言:javascript
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.myFunction();
  }

  myFunction() {
    console.log('Function called automatically');
  }
}
  1. 使用 constructor 构造函数:

如果你需要在组件创建时立即调用函数,可以将函数放在构造函数中。

代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  constructor() {
    this.myFunction();
  }

  myFunction() {
    console.log('Function called automatically');
  }
}

请注意,如果你的函数依赖于组件的输入属性或其他依赖项,那么在构造函数中调用可能会导致问题。在这种情况下,建议使用 ngOnInit 生命周期钩子。

  1. 使用 @ViewChildAfterViewInit

如果你需要在视图初始化后自动调用函数,可以使用 @ViewChildAfterViewInit 生命周期钩子。

代码语言:javascript
复制
import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements AfterViewInit {

  @ViewChild('myElement') myElement;

  constructor() { }

  ngAfterViewInit() {
    this.myFunction();
  }

  myFunction() {
    console.log('Function called automatically');
  }
}

在这个例子中,@ViewChild 用于获取视图中的元素,ngAfterViewInit 用于在视图初始化后调用函数。

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

相关·内容

2-进军 angular1.x 表达式和指令

2-表达式和指令,数据绑定 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令,数据绑定 3-模型和作用域 scope 4-控制器和过滤器 一 表达式 ng-init...ng-bind 两者都可以像 JavaScript 一样内嵌原生的 js代码,并且很好的运行 其中数字,字符串,object 对象,数组和表达式都和 JavaScript 的展现方法相同。...tips 每个页面只有一个 ng-app 指令,多的不起作用 1.ng-app是一个特殊的指令,一个HTML文档只出现一次,如出现多次也只有第一个起作用;ng-app可以出现在html文档的任何一个元素上...创建自己的 指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。...vue 一样的元素名来调用我们的指令(这里的指令我们可以理解为 一个我们自己创建的带有特殊指令的元素) 限制使用 var app = angular.module("myApp", []); app.directive

2.4K20

Angularjs基础(二)

AngularJS 字符串   Angular字符串就像JavaScript字符串:     实例:       ng-init="firstName='John...ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序 ng-init 指令       ng-init指令为AngularJS 应用程序定义了初始值。       ...你可以使用.directive函数来添加自定义的指令。     要调用自定义指令,HTML元素张需添加自定义指令名。     ...-- 指令: runoob-directive--> 限制使用     你可以限制你的指令只能通过特定的方式来调用。       ...实例:         通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:         var app = angular.module("myApp

3.5K60
  • AngularJS入门 & 分页 & CRUD示例

    是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。...指令可以对变量初始化,还可以进行方法初始化调用(ng-init="findAll()",页面刷新findAll方法会自动被调用)。...ng-init="name='song'"> {{name}} 2.4 模块化设计 使用模块化的开发方式管理js: var app = angular.module...2.5 ng-controller: (指定控制器) $scope 的贯穿整个AngularJS App应用,所有变量,函数,对象全都绑定在$scope对象中,它在视图和控制器间建立一个通道,基于作用域视图在修改数据时会立刻更新...$scope.selectIds = []; //3.页面数据的复选框点击事件调用该方法 $scope.updateSelection = function (id, $

    3.3K40

    前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    语法格式如下: {{ express | filter:parameter1:p2:p3… | … | …}} 过滤器分了内置过滤器与自定义过滤器,过滤器的调用方式也分了在模板中调用与在函数中调用。...2.1.2、在脚本中调用过滤函数 在函数中调用过滤器的方法是:在控制中添加对$filter的依赖,$filter("过滤函数名称")(被过滤对象,'参数') 示例代码: 自动载入启动,文档中找到的第一个ngApp将被用于定义自动载入启动的应用的根元素。...@:使用@(@attribute)来进行单向文本(字符串)绑定 = :使用=(=attribute)进行双向绑定变量 & :使用&来调用父作用域中的函数 3.5.1、第一个自定义指令 示例代码: <!...().toLocaleString()+" 已计时:"+attr.passed+"秒"); //向元素中设置文本为当前时间 //定时器,每隔指定的时间调用函数

    15.4K60

    如何在 ASP.NET MVC 中集成 AngularJS(1)

    另外,还有最新的数据库技术、最新的设计模式和技术。 当选择最新的软件技术时,有几个因素在起作用,其中包括如何将这些技术整合起来。...()"> {{vm.title}} 当控制器构造函数被调用时,使用“controller as”的语法,叫做“this”的控制器示例就会被创建...="page-header">{{vm.title}} 当视图加载时,索引 Angular 视图将会通过 ng-init 指令来执行索引控制器的初始化功能。...一个典型的控制器看起来这样: // aboutController.js angular.module("codeProject").controller('aboutController', ['$routeParams...在下面的例子中,提供了一种用于注册和动态加载两个控制器和服务的注册方法。如果你愿意,也可以包括 Angular 全部库和指令的注册功能。

    7.6K60

    带你走近AngularJS - 基本功能介绍

    controller 构造函数获取$scope 对象,用于存储所有controller 暴露的接口和方法。scope 由Angular 传递到视图和指令层。...filter 构造函数返回一个方法用于更改input文本的显示方式。Angular 提供很多内置的filter,同时,你也可以添加自定义filter,操作方式Angular内置filter相同。...Filter需要设置参数,语法格式也是固定的: someValue |filterName:filterParameter1:filterParameter2.... directive 构造函数返回了一个方法...", []); 如果希望在模块中添加元素,你可以通过名称调用模块向其中添加。...(data 模块没有依赖项,数组为空) angular.module("data", []) 应用的主页面中需要声明ng-app 指令, AngularJS 会自动添加需要的引用: <html ng-app

    3.1K100

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    configFn: 模块的启动配置函数,在angular config阶段会调用该函数,对模块中的组件进行实例化对象实例之前的特定配置,如我们常见的对$routeProvider配置应用程序的路由信息。...使用filter过滤器:filter函数使用query的值来创建一个只包 匹配query记录的新数组。         ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。...另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器:把要注入的服务放 到一个字符串数组(代表依赖的名字)里,数组最后一个元素是控制器的方法函数: var PhoneListCtrl...这个注入器自己并不知道http和route是干什么的,实际上除非它在模块定义的时候被配置过,否则它根 都不知道这些服务的存在。...另一个非常需要注意的是,在上面的代码里面,当调用Phone服务的方法是我们并没有传递任何回调函数。

    55080

    day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加修改删除品牌的实现 + 品牌分页条件查询的实现_用心笔记

    ng-app 指令定义了 AngularJS 应用程序的根元素。 ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。...ng-controller 指令用于为你的应用添加的控制器。 在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。...[10, 20, 30, 40, 50], // perPageOptions:分页选项(初始化)         onChange: function(){   // onChange:当页码变更后自动触发的方法...指令的调用。...修改”按钮,调用此方法执行查询实体的操作              <button type="button" class="btn bg-olive btn-xs

    9K64

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...通俗的来说,声明周期函数就是组件创建,组件更新,组件销毁是会触发的一系列方法。...生命周期钩子详解:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法...: 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!!...该方法接受当前和上一属性值的 SimpleChanges 对象 在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。

    4K20

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    1.3、React React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。...的项目,则先要添加对angularJS的引用,有如下几个方法: 1)、去angular官网或git下载,地址:https://github.com/angular/ 2)、使用cdn 3)、安装node.js...的构造方法,或者指定何时去调用 1.7、定义AngularJS模块 AngularJS模块是一种容器、它把代码隔离并组织成简单、整洁、可复用的块。...configFn:模块配置阶段调用的另一个函数。...: 方法二与方法一的区别: 使用模块标签{{ }}加载慢或渲染慢时用户将看到标签,而ng-bind不会,但是使用模块要方便。

    15.4K100
    领券