angular怎么获取ngtemplate中的元素属性

您好，在Angular中，可以使用ElementRef类来获取ngTemplate中的元素属性。ElementRef类是一个Angular服务，它提供了一种方法，可以让我们访问DOM元素，并获取其属性。要使用ElementRef类，首先需要在模块中导入它，然后在构造函数中注入它，如下所示：

constructor(private elementRef: ElementRef) {

}

接下来，可以使用ElementRef类的nativeElement属性来访问DOM元素，然后使用getAttribute()方法来获取元素的属性，如下所示：

let myElement = thiselementRefnativeElement;

let myAttribute = myElementgetAttribute('myAttribute');

这样，就可以获取ngTemplate中的元素属性了。

在mat-tree组件中，可以通过以下步骤实现节点获取焦点时高亮显示：

在节点定义中，使用ViewChild装饰器获取节点的MatTreeNode引用。

监听节点的focus事件，在事件处理函数中设置节点的样式类，实现高亮显示。

例如，下面是一个mat-tree节点高亮显示的示例代码：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">

<mat-tree-node matTreeNodeDef="let node" matTreeNodePadding

[matTreeNodeToggle]="treeControlgetDescendantCount(node) > 0">

<button mat-icon-button disabled></button>

{{nodename}}

</mat-tree-node>

<mat-tree-node matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>

<button mat-icon-button matTreeNodeToggle

[attraria-label]="'toggle ' + nodename">

<mat-icon class="mat-icon-rtl-mirror">

{{treeControlisExpanded(node) 'expand_more' : 'chevron_right'}}

</mat-icon>

</button>

{{nodename}}

</mat-tree-node>

</mat-tree>

import { Component, OnInit, ViewChild } from '@angular/core';

import { MatTreeNestedDataSource } from '@angular/material/tree';

import { MatTreeNode } from '@angular/material/tree';

interface TreeNode {

name: string;

children: TreeNode[];

}

@Component({

selector: 'app-tree',

templateUrl: '/treecomponenthtml',

styleUrls: ['/treecomponentcss']

})

export class TreeComponent implements OnInit {

@ViewChild(MatTreeNode) treeNode: MatTreeNode;

treeData: TreeNode[] = [

{

name: 'Parent 1',

children: [

{ name: 'Child 11' },

{ name: 'Child 12' }

]

},

{

name: 'Parent 2',

children: [

{ name: 'Child 21' },

{ name: 'Child 22' }

]

}

];

dataSource = new MatTreeNestedDataSource<TreeNode>();

treeControl = new FlatTreeControl<TreeNode>(

node => nodechildren nodechildrenlength : 0

);

hasChild(_: number, node: TreeNode) {

return !!nodechildren && nodechildrenlength > 0;

}

ngOnInit() {

thisdataSourcedata = thistreeData;

}

onFocus(node: MatTreeNode) {

node['_elementRef']nativeElementclassListadd('focused');

}

onBlur(node: MatTreeNode) {

node['_elementRef']nativeElementclassListremove('focused');

}

}

在上面的示例代码中，MatTreeNode装饰器用于获取树节点的引用。在节点的focus和blur事件处理函数中，通过设置样式类来实现高亮和取消高亮的效果。在CSS文件中定义样式类focused，用于设置节点高亮时的样式：

focused {

background-color: #e3f2fd;

}

Javascript框架在处理seo方面存在问题，因为爬虫在检索seo信息的时候会读不了js给其赋的值，导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的，下面先说如何在路由跳转时修改页面的seo信息，现在spa跳转一般用route-ui了，就以这个为基础讲解，在app

js配置项state中加入title信息，如下：data:{pageTitle:'usertitle'}

state('index

user',{url:'/user',views:{'content@index':{templateUrl:'templateHtml/user/user

html',controller:'userCtrl'}},data:{pageTitle:'usertitle'}})

state('index

user

a',{url:'/a',templateUrl:'templateHtml/user/a

html',data:{pageTitle:'useratitle'}})

state('index

user

b',{url:'/b',templateUrl:'templateHtml/user/b

html',data:{pageTitle:'userbtitle'}})然后使用通过监听$stateChangeSuccess来修改页面title:app

directive('title',['$rootScope','$timeout',function($rootScope,$timeout){return{link:function(){varlistener=function(event,toState){console

log(toState);$timeout(function(){$rootScope

title=(toState

data&&toState

data

pageTitle)toState

data

pageTitle:'Defaulttitle';$rootScope

metakeywords="thisiskeywords"});};$rootScope

$on('$stateChangeSuccess',listener);}};}]);这里赋值是通过获取当前state中设置的title，也就是这里toState对象的值，当我们打印这个toState时就会发现：这里是获取的已经设置好的data中pageTitle的值，如果不想写在state里或者写死，可以传state中的唯一标示，配合后台接口，将查询的title渲染到页面；同样meta标签如keywords、description可以在此时一同绑定；上面说到javascript框架在seo方面存在短板，应对ng的这个问题市面上也有很多方案,比如prerender，seo

js等，思想都是在页面加入表示，让爬虫在页面渲染好后才去扒数据，同时服务器上要配置些服务，服务将检测是否有对应这个URL的快照或者缓存的页面，如果存在就发给爬虫，如果不存在，则生成快照，然后发送正确的页面给爬虫；处理起来还是要费些功夫的，所以也可以采用ng+常规的开发模式，一些重要的页面不要用这种页面渲染seo的方式，或者建立专门的seo信息页；所以在这方面感觉用ng框架做app（ionic）还是很合适的；以上所述是小编给大家介绍的Angular设置title信息解决SEO方面存在问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的

在此也非常感谢大家对脚本之家网站的支持！

变更检测就是Angular检测视图与数据模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，就把数据同步到视图上。

我们先看下面这个例子

通过以上例子我们可以总结出来，在异步事件发生的时候可能会使数据模型发生变化。可是angular是如何检测到异步事件发生了呢？这还要说起zonejs。

官方定义zonejs是javascript的线程本地存储技术，猛地一听感觉好高大上，其实zonejs就是一种用来拦截和跟踪异步工作，为JavaScript提供执行上下文的插件。

那么它是如何感知到异步事件呢，其实方法相当简单粗暴，zonejs采用一种叫做猴子补丁 (Monkey-patched)的方式，将JavaScript中的异步任务都进行了包装，这使得这些异步任务都能运行在Zone（一个全局的对象，用来配置有关如何拦截和跟踪异步回调的规则）的执行上下文中，每个异步任务在 Zone 中都是一个任务（Task），除了提供了一些供开发者使用的钩子外，默认情况下Zone重写了以下方法：

zonejs部分源码

通过打印window对象我们可以发现zonejs对异步方法进行了封装，非异步方法并没有处理。

zonejs本身比较庞大复杂，这里不做深入研究，对它的原理感兴趣的可以看一下这篇文章-zonejs。我们这里主要是了解它是怎么配合Angular工作的即可。

在 Angular 源码中，有一个 ApplicationRef 类，其作用是当异步事件结束的时候由 onMicrotaskEmpty执行一个 tick 方法 提示 Angular 执行变更检测及更新视图。

调用tick方法。其中this_zone 是NgZone 的一个实例， NgZone 是对zonejs的一个简单封装。

tick函数对所有附在 ApplicationRef上的视图进行脏检查。

Ok，我们现在已经知道Angular怎么监听异步事件了，那么当监测到异步事件后是怎么判断是否需要更新视图呢？其实比较简单，Angular通过脏检查来判断是否需要更新视图。脏检查其实就是存储所有变量的值，每当可能有变量发生变化需要检查时，就将所有变量的旧值跟新值进行比较，不相等就说明检测到变化，需要更新对应视图。当然，实际情况肯定不是这么简单，Angular会通过自己的算法来对数据进行检查，对算法感兴趣的可以参考这篇文章-Angular的脏检查算法。

Angular 应用是一个响应系统，首次检测时会检查所有的组件，其他的变化检测则总是从根组件到子组件这样一个从上到下的顺序开始执行，它是一棵线性的有向树，任何数据都是从顶部往底部流动，即单向数据流。怎么证明呢？看这个例子

运行以后我们会得到如下结果，可以看到首次检测时检查了所有组件，包括ReferComponent，检测从上到下逐个检测。点击改名按钮后再次检测时则只检测有变化的那一侧组件（RankParentComponent，RankChildrenComponent）。其中我们可以观察到，虽然在AppComponent中输入属性也发生了变化并且也更新了视图，但是ngOnChanges钩子却没有检测到变化，注意这是一个坑。

那么什么是单向数据流呢？其实简单理解就是angular检测到数据变化到更新完视图的过程中数据是不应该被改变的，如果我们在这期间更改了数据，Angular便会抛出一个错误，举个例子，我们在RankChildrenComponent的ngAfterViewChecked钩子函数中更改childName的值，在控制台会看到如下错误。

如果必须要更改这个属性的值，能不能做呢？答案是可以的。结合刚次提到的单向数据流，如果我们把这次数据变更放到下一轮Angular变更检测中，就能解决这个问题了。怎么做呢？刻意异步一下就行了。是不是很神奇？

至于angular为什么要采用单向数据流，其实也很好理解，最主要的就是防止数据模型和视图不统一，同时也可以提高渲染的性能。

讲了这么多，所以到底有什么用呢？其实在 Angular 中，每一个组件都都它自己的检测器(detector)，用于负责检查其自身模板上绑定的变量。所以每一个组件都可以独立地决定是否进行脏检查。默认情况下，变化检测系统将会走遍整棵树（defalut策略），但我们可以使用OnPush变化检测策略，利用 ChangeDetectorRef实例提供的方法，来实现局部的变化检测，最终提高系统的整体性能。

来，举个例子。在ReferComponent中，我们设个定时器2秒以后更新一个非输入属性的值，在默认策略时，可以发现2秒以后视图中的值发生了改变，但是当我们把策略改为Onpush时，除了在AppComponent点击按钮改变输入属性justRefer外，其他属性改变不会引起视图更新，ReferComponent组件的检测也被略过。我们可以这么总结：OnPush 策略下，若输入属性没有发生变化，组件的变化检测将会被跳过。

可是我就是要更改非输入属性怎么办呢？别急，Angular早就为你想好了。在Angular中，有这么一个class：ChangeDetectorRef ，它是组件的变化检测器的引用，我们可以在组件中的通过依赖注入的方式来获取该对象,来手动控制组件的变化检测行为。它提供了以下方法供我们调用

现在我们来试试解决刚才那个问题，我们对ReferComponent做如下改造。

ok，现在看到在Onpush策略下手动修改非输入属性的值，视图也可以及时更新了。其他的几个方法也都大同小异，感兴趣的可以逐个试试。

以上就是关于angular怎么获取ngtemplate中的元素属性全部的内容，包括:angular怎么获取ngtemplate中的元素属性、mat-tree节点得到焦点高亮怎么实现、AngularJS怎么做SEO等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！