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

Angular 2获取附加到它的所有变量。在控制器中

Angular 2是一种流行的前端开发框架,用于构建单页应用程序。要获取附加到Angular 2控制器的所有变量,可以使用以下方法:

  1. 使用@ViewChild装饰器:@ViewChild装饰器允许我们在组件中获取对子组件、指令或DOM元素的引用。通过在控制器中使用@ViewChild装饰器,可以获取对附加变量的引用。例如:
代码语言:typescript
复制
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div #myVariable>Some content</div>
  `
})
export class MyComponent {
  @ViewChild('myVariable') myVariable: ElementRef;

  ngAfterViewInit() {
    console.log(this.myVariable.nativeElement);
  }
}

在上面的示例中,我们使用了一个名为myVariable的模板引用变量,并使用@ViewChild装饰器将其绑定到控制器的myVariable属性上。在ngAfterViewInit生命周期钩子中,我们可以通过this.myVariable.nativeElement访问到附加的变量。

  1. 使用ngAfterViewInit生命周期钩子:ngAfterViewInit是Angular生命周期中的一个钩子函数,当组件的视图初始化完成后调用。在ngAfterViewInit中,可以通过DOM查询或访问模板引用变量来获取附加的变量。例如:
代码语言:typescript
复制
import { Component, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div #myVariable>Some content</div>
  `
})
export class MyComponent implements AfterViewInit {
  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const myVariable = this.elementRef.nativeElement.querySelector('#myVariable');
    console.log(myVariable);
  }
}

在上面的示例中,我们注入了ElementRef依赖,并在构造函数中将其保存在私有属性elementRef中。然后,在ngAfterViewInit中,我们使用this.elementRef.nativeElement.querySelector('#myVariable')来获取附加的变量。

这些方法可以帮助您在Angular 2中获取附加到控制器的所有变量。请注意,这些方法适用于Angular 2及更高版本。

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

相关·内容

【17】进大厂必须掌握面试题-50个Angular面试

Angular过滤器用于格式化表达式值,以便将其显示给用户。这些过滤器可以添加到模板,指令,控制器或服务。不仅如此,您还可以创建自己自定义过滤器。...Angular提供程序是什么? 提供程序是Angular可配置服务。这是对依赖关系注入系统一条指令,提供有关获取依赖关系值方式信息。...31.通过对Angular进行脏检查,您了解什么? Angular,摘要过程称为脏检查。之所以调用它,是因为扫描整个范围以进行更改。换句话说,它将所有作用域模型值与以前作用域值进行比较。...由于所有监视变量都包含在单个循环中,因此任何变量任何更改/更新都将导致重新分配DOM存在其余监视变量。...DOM 物料清单 1.代表文档对象模型 1.代表浏览器对象模型 2.表示网页内容 2.在网页上方工作,并包含浏览器属性 3.所有对象都以树状结构排列,并且只能通过提供API来操作和访问文档 3.所有全局

41.4K51
  • 第217天:深入理解Angular双向数据绑定原理

    具体代码实现通常用到以下几个ng指令: ng-model:将一个DOM节点值与一个angular变量进行绑定,当DOM节点值发生修改时候变量也会随之修改。...ng-bind:将angular变量显示到页面。...,表示不需要其他模块 2、Module.controller() 控制器 1 var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例 2 app.controller...2.ng-controller = “控制器名” ng-controller 指令用于为你应用添加控制器控制器,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。...5.双大括号{{变量}} 用双重大括号来获取变量值。当在控制器添加 $scope对象时,视图 (HTML)可以获取了这些属性。

    3.6K20

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

    google后安装步骤:   1、安装xcode、git;   2、使用git将node源码拉到本地git clone git://github.com/ry/node.git   3、....您需要安装Node.js和Testacular来运行本项目,请到Node.js官方网站下载并安装最新版,然后把node可执 行程序路径添加到系统环境变量PATH,完成后命令行运行一下命令可以查看是否安装成功...ng-model -此指令定义模型,该模型是变量AngularJS使用。 ng-repeat -该指令将重复集合每个项目的HTML元素。...请注意它是完全不同方式,一个是声明创建module,而另外一个则是获取已经声明了module。应用程序,对module声明应该有且只有一次;对于获取module,则可以有多次。...所有以:符号声明变量(此处变量为phones)都会被提取,然后存放在routeParams对象

    53980

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

    4、HelloController可以获取它所需要$scope对象,则没有必要去创建,依赖注入 5、当文本框值发生变化时$scope对象值立即变化,模型与视图双向绑定 6、没有必要自己调用HelloController...,你需要将它添加在列表所有依赖实在数组中指定依赖模块。...2.7、ng-repeat迭代 ngRepeat指令为集合每项实例化一个模板。每个模板实例拥有自己域,使用循环变量指向当前集合项上,$index指向当前项索引或键值。...练习:购物车 1、双向绑定集合数据 2、执行移除事件 3、隔行换色、使用angularJS完成 4、点击数量与小计时进行排序(选做) 三、区分UI和控制器职责 控制器职责: 1、为应用模型设置初始状态...[itemN ]]]]); 将一个或多个新元素添加到数组开始,数组元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

    15.3K100

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

    /angular/ 2)、使用cdn 3)、安装node.js,使用npm获取 示例代码: <!...4、HelloController可以获取它所需要$scope对象,则没有必要去创建,依赖注入 5、当文本框值发生变化时$scope对象值立即变化,模型与视图双向绑定 6、没有必要自己调用HelloController...,你需要将它添加在列表所有依赖实在数组中指定依赖模块。...三、区分UI和控制器职责 控制器职责: 1、为应用模型设置初始状态 2、通过$scope对象把数据模型和函数暴露给视图(UI模板) 3、监视模型其余部分变化,并采取相应动作,双向绑定 为了让控制器保持轻量可管理状态...,建议视图每一块功能区域创建一个控制器如,MenuController、PathController 可以嵌套控制器,适OO继承特性 示例代码: <!

    12.6K30

    AngularDart4.0 指南- 模板语法二 顶

    deleteRequest.stream; void delete() { _deleteRequest.add(hero); } 组件定义了一个私有的StreamController属性,并通过deleteRequest获取器公开控制器...这些元素所有组件都保留在内存Angular可能会继续检查更改。 您应用可能会占用相当可观计算资源,会降低用户不可见性能。...下一个示例捕获名为i变量索引,并使用像这样英雄名称来显示。...别无选择,只能拆除旧DOM元素并插入所有DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值方法。 在这个例子,这个值就是英雄ID。...大多数情况下,Angular将引用变量值设置为声明元素。

    30K20

    angularjs 控制器、作用域、广播详解

    角色就会很尴尬,因为我们不可能把不同业务数据模型都绑在同一个控制器。...使用控制器时要注意几点: 1.不要去复用controller,一个控制器一般只负责一小块视图;(一般控制器处理都是业务逻辑,业务逻辑复用性一般很小) 2.不要在controller操作DOM,这不是控制器职责...控制器里面没有department,但它依然可以访问到department上变量值。...$scope也是实现双向数据绑定基础; 8.可以用angular.element($0).scope()来进行调试; 9.$scope可以控制器之间传播事件,可以向上$scope....$broadcast(); 最后一张$scope生命周期图: 创建(创建一个作用域)——链接($scope对象会链接到视图中)——更新(脏值检查)——销毁(销毁作用域) 三、广播 3.1相关概念 通常作用域之间是不共享变量

    1.9K51

    Angular源码分析之$compile

    @(Angular) $compile,Angular即“编译”服务,涉及到Angular应用“编译”和“链接”两个阶段,根据从DOM树遍历Angular根节点(ng-app)和已构造完毕...具体实现,通过collectDirectives函数完成所有节点指令扫描。...,完成隔离作用域属性单向绑定(@),双向绑定(=)和函数引用(&),针对隔离作用域双向绑定模式(=)实现,则是通过自定义编译器完成简单Angular语法编译,指定作用域下获取表达式(标示符...通过compileNodes返回从根节点(ng-app所在节点)开始所有指令最终合成链接函数,最终publicLinkFn函数执行。...publicLinkFn,完成根节点与根作用域绑定,并在根节点缓存指令控制器实例,最终执行合成链接函数,完成了Angular最重要编译,链接两个阶段,从而开始了真正意义上双向绑定。

    1.5K50

    2Angular JS 学习笔记 – 双向数据绑定和Scope概念

    这是一个重要点,因为使得控制器不用知道将要如何显示,大大提升了测试环境; angular.module('scopeExample', []) .controller('MyController...;这个作用域是视图上所有相关事物来源; 从可测试角度来看,这种分割控制器和视图是不错,因为允许我们测试行为缺不需要分心关心渲染细节; it('should say hello', function...当一个新作用域创建后,它将添加到父作用域下成为一个子作用域。...这个延迟是必要,因为收集多个模型更新到一次watch通知,保证watch通知时没有其他watch已经在运行。...一个显式调用只有实现自定义事件会调用使用,或在工作第三方回调。 进入Angular执行上下文通过调用scope.

    13.2K20

    达观数据对AngularJS技术思考与实践

    需要注意一点是,一个控制器不应该做太多工作。应该只包含单个视图业务逻辑,保持控制器职责单一最常见做法是将那些不属于控制器工作抽离到服务,然后通过依赖注入控制器中使用这些服务。...AngularJS将会遍历DOM模板, 来生成相应NG指令,所有的指令都负责针对view(即HTMLng-model)来设置数据绑定。 HTML: ? JS: ?...特别是测试时候不好办,因为对某个部分进行孤立测试常常需要模拟依赖。第三种方式是最好,因为它不必组件中去主动需找和获取依赖,而是由外界将依赖传入。...H1始终显示world,H2会显示键入值。 ? H1,H2都显示键入值。 2控制器继承:子控制器作用域将会原型继承父控制器作用域。...因此当你需要重用来自父控制器功能时,你所要做就是父作用域中添加相应方法。这样一来,自控制器将会通过作用域原型来获取父作用域中所有方法。 ?

    5.4K150

    AngularJS基础入门初探

    2)文本输入指令绑定到一个叫name模型变量。   (3)双大括号标记将name模型变量加到问候语文本。   ...(3)ng-app指令作用在于声明当前DOM被AngularJS这个库定义一个模块所托管,而ng-model指令则用于绑定模型变量,ng-click绑定控制器声明事件。...三、开发一个任务清单程序 3.1 需求说明   假设我们要做一个任务清单程序,它可以记录我们要做所有任务信息,并且我们可以随时标记任务为已完成,而且随时增加新任务到任务列表。...AngularJS各种示例程序,TodoMVC算是一个比较出名项目,如下图所示: ?   这里我们目标就是仿照TodoMVC,借助AngularJS实现一个简易版TodoList页面。...return item.done; }); return temp.length; } }]); })(window);   可以看出,控制器属性和行为分开定义

    1.8K30

    Angular2 VS Angular4 深度对比:特性、性能

    那么,本文将会对Angular2Angular4进行深度对比,以便帮助大家更好了解这两个版本。 Angular2 Angular22015年底发布。...接下来一起了解Angular2这个版本发布原因以及如何将其添加到Web开发。 ...子注入: 子注入继承了其父级注入所有的专业服务,以及子层次重写能力。根据需要,在一定范围内,一些类型对象可以被调用和机械重写。...动态载入: 这是之前Angular版本均不具备功能,Angular2包含了这个功能,即使开发人员忙碌时,也能够添加新指令或控件。 模板: Angular2,模板编译过程是异步。...设计: 所有这些逻辑都是使用管道架构创建,这使得将自己操作添加到管道或删除默认操作变得非常简单。此外,异步字符允许开发人员管道,实现对用户进行身份验证或加载控件信息服务器请求。

    8.7K20

    Angular2:从AngularJS 1.x 中学到经验

    《迈向Angular2》第4 章,将会学习如何用Angular 2组件和指令来取代AngularJS1.x 控制器功能。...Angular 2 更进一步,直接删除了scope 对象。所有表达式都在特定UI 组件上下文 执行。...移动设备上初始化应用可能要用几秒到十几秒时间:从服务端获取所有资源、解析并执行JavaScript、渲染页面、应用所有样式。如果在低端移动设备上使用无线网络,这个过程可能会让用户放弃访问应用。...本书在编写这段内容时候,这款工具仍然处在开发早期阶段,所以并没有被包含在框架内核《迈向Angular2》第8 章,我们将会深入学习这款工具。...《迈向Angular2》第4 章Angular 2 组件和指令,我们会讨论Angular 2 模板。

    2.7K10

    4-进军 angular1.x 控制器和过滤器

    4-控制器和过滤器 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令,数据绑定 3-模型和作用域 scope 4-控制器和过滤器 基本 AngularJS 应用程序被控制器控制...AngularJS 使用$scope 对象来调用控制器 AngularJS , $scope 是一个应用对象(属于应用变量和函数)。...控制器 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)对象。 控制器作用域中创建了两个属性 (firstName 和 lastName)。...,也是一个 JavaScript 对象,所以自带 ng-controller ="myCtrl" , 这个 myCtrl 也是属于一个 JavaScript 对象 控制器可以一个 ng-app 下有多个...uppercase 过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式

    1.9K30
    领券