首页
学习
活动
专区
工具
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.5K51
  • 第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.7K20

    【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对象中。

    55080

    前端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.4K100

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

    /angular/ 2)、使用cdn 3)、安装node.js,使用npm获取 示例代码: 获取它所需要的$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

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

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

    13.2K20

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

    需要注意的一点是,一个控制器不应该做太多工作。它应该只包含单个视图的业务逻辑,保持控制器职责单一的最常见做法是将那些不属于控制器的工作抽离到服务中,然后通过依赖注入在控制器中使用这些服务。...AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-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 深度对比:特性、性能

    那么,本文将会对Angular2和Angular4进行深度对比,以便帮助大家更好的了解这两个版本。 Angular2 Angular2是在2015年底发布的。...接下来一起了解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
    领券