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

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

    是一款优秀前端JS框架,已经被用于Google多款产品当中。AngularJS有着诸多特性,最为核心是:MVC、模块化、自动化双向数据绑定、依赖注入等等。...指令可以对变量初始化,还可以进行方法初始化调用ng-init="findAll()",页面刷新findAll方法自动调用)。... {{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("过滤函数名称")(被过滤对象,'参数') 示例代码: <!...AngularJS应用能被自动载入启动,文档中找到第一个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服务方法是我们并没有传递任何回调函数

    52980

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

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

    3.9K20

    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

    前端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.3K100
    领券