Web前端最全Angular权威教程之路由篇_angular 路由，html的介绍及常用标签

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

为什么使用路由

• 将应用程序划分为多个分区
• 维护应用程序的状态
• 基于某些规则保护应用分区

我觉得我已经会了angular的基本套路了，导入+配置，所以路由也是一样。

整个路由的API

https://angular.io/api/router/Route#properties

interface Route {
  path?: string
  pathMatch?: string
  matcher?: UrlMatcher
  component?: Type<any>
  redirectTo?: string
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers
}

导入

import {   RouterModule,   Routes } from '@angular/router'; 

配置

const routes: Routes = [   
{ path: '', redirectTo: 'home', pathMatch: 'full' },   
{ path: 'home', component: HomeComponent },   
{ path: 'about', component: AboutComponent },   
{ path: 'contact', component: ContactComponent },   
{ path: 'contactus', redirectTo: 'contact' }, 
];

红色区域：

并没有定义contactus的绑定组件，所以这里的意思是当地址为contactus时，自动重定向（跳转）到contact的页面，此页面已经与ContactComponent进行绑定。

黄色区域：

与红色区域知识点相同，不同点在pathMatch,默认为prefix。

pathMatch?: string
prefix	默认情况下，路由器从左方检查URL元素以查看URL是否与给定路径匹配，并在匹配时停止。例如，“ / team / 11 / user”与“ team /：id”匹配。
full	路径匹配策略“完整”与整个URL匹配。重定向空路径路由时，执行此操作很重要。否则，因为空路径是任何URL的前缀，所以路由器即使在导航到重定向目标时也将应用重定向，从而造成无限循环。

安装路由

更改NgModule：

• 导入RouterModule
• 在NgModule中的imports数组里使用RouterModule.forRoot(routes)来安装路由配置
  

关于RouterOutlet

前提也是导入(RouterModule)，别忘了导入＋配置的模式。
router-outlet元素标示了各个路由组件的内容应该在哪里被渲染。

router-outlet在整个导航目录的正下方，当访问/home时候，这里便是HomeComponent被渲染的地方，相同在访问/about，/contact同理。打个比方，点到谁，谁上场，router-outlet提供一个出口，场地的作用。

关于routerLink

还是刚刚那张图，routerLink可以在不重载页面的情况下链接路由。
相对于 <a href="/#/home">Home</a> 之前直接用href超链接形式的优化。

<base href="/">

在html中的位置：

如果一个路由的路径为/home ，base元素的声明是href=“mine”，那么程序将使用/mine/#/home为实际路径。

等同方法：

@NgModule({   
declarations: [ RoutesDemoApp ],  
 imports: [     
 BrowserModule,     
 RouterModule.forRoot(routes) // <-- routes 
  ],   
 bootstrap: [ RoutesDemoApp ],   
 providers: [     
 { provide: LocationStrategy, useClass: HashLocationStrategy },     
 { provide: APP\_BASE\_HREF, useValue: '/' } // <--- this right here 
  ] 
  }) 

将{ provide: APP_BASE_HREF, useValue: ‘/’ }放到providers中，等同于在HTML中使用

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）