2024年最全Angular 在项目中学习@ViewChild和ElementRef的使用，2024年最新2024年Web前端面经分享

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

export class ChildComponent{

childFunction(){

console.log(‘this function is from childComponent’);

}

}

parentComponent.ts

import { Component } from ‘@angular/core’;

import { ViewChild } from ‘@angular/core’;

import { ChildComponent } from ‘…/子组件的目录’;

@Component({

selector:‘app-parent’,

templateurl:‘bababa’,

styleUrls:‘bababab’,

})

export class ParentComponent{

@ViewChild(ChildComponent) child : ChildComponent;

parentFunction(){

console.log(‘this function is from parentComponent’)

this.child.childFunction();

}

}

在父组件中，要注意别忘了准备工作，导入ViewChild和子组件

import { ViewChild } from ‘@angular/core’;

import { ChildComponent } from ‘…/子组件的目录’;

此时ViewChild传入的是子组件ChildComponent，以变量child保存

@ViewChild(ChildComponent) child : ChildComponent;

这样就可以大大方方的使用子组件里的方法了。

@ViewChild 使用二

---

当ViewChild传入的是字符串，子组件打了锚点，父组件通过锚点位置从而获得子组件的属性或方法

八九不离十，只不过使用子组件ChildComponent时要打锚点做标记,即：

<app-child #child>I am a childComponent

另外，在父组件ParentComponent的ts里是这么写的：

export class ParentComponent{

@ViewChild(‘child’) child : any; //找child这个锚点

parentFunction(){

console.log(‘this function is from parentComponent’)

this.child.childFunction();

}

}

小结

---

近期在项目中发现：对于@ViewChild的使用，更多的是使用打锚点这种方式。有可能是我接触相关项目不够多，总结的这个规律不一定很具有典型性。

当我在项目实践时，需要去找这些父子组件之间的关系，看到有锚点如：

<app-child #child>I am a childComponent

那么我就知道，此父组件使用了 selector为 app-child 的子组件中的某种属性或方法。那么我再去搜索 app-child，再看回父组件的ts，对比查看，我就能知道父组件到底怎么操作子组件。

ElementRef

=========================================================================

ElementRef也是在我了解@ViewChild时顺带了解的，因为在项目中发现他们二者会结合使用。

ElementRef在我现在的理解，我觉得它是用来操作DOM的，对DOM节点做一些操作，改字体啊，颜色啊，诸如此类的。

看看ElementRef的使用

import { Component, ElementRef, AfterViewInit } from ‘@angular/core’;

export class AppComponent {

constructor(private elementRef: ElementRef) { }

ngAfterViewInit() {

console.dir(this.elementRef.nativeElement.querySelector(‘div’));

this.elementRef.nativeElement.querySelector(‘div’).style.color=‘red’;

}

}

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
…
[外链图片转存中…(img-eIk0SQi4-1715640424429)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666