发表于： 2019-11-19 23:02:39
0 944
今天完成的事情：
整理angular组件知识点
微信小程代码构成
JSON配置
WXML模版
wxss样式
js逻辑交互
整理一天所学的知识点
明天计划的事情：
遇到的问题：
无
收获：
整理知识点
组件
angualr 组件你就可以理解为HTML和css 以及JS相结合的东西放在一个文件里面,当你创建组件后，文件里面的东西angular跟你创建好了你只需要在里面写代码把各种功能渲染出来就行了。
APP文件
这里是根目录，是放你组件的地方，模块 服务以及其他你需要用到的东西，都会通过根目录来进行渲染投放在页面上去的。
根目录下的app.html 是链接所以组件HTML的地方，你的自定义模块都会通过一个叫路由的东西把组件链接起来。
index.html
这个文件在src文件里面，而它是app投射的地方。你在文件可以看下 <app-root></app-root> 包含这 app.html里面的所以代码是最外层的通过调试你可以很清楚看到，主要要说明的就是有可能你会需要用到这个THML 里面的CSS进行大小调试。可以理解为入口吧.
创建组件
ng g 这行代码可以直接获得你想创建路由 服务 或者组件其他代码
组件：ng g component 后面跟你的文件 和 名字
你会获得你个组件
组件基础 HTML CSS TS（写业务逻辑） 会自动帮你创建完成
创建完成会在模块中自动引入组件的核心部分 compile.component.ts 文件。
//这个文件里面的核心部分会自动包含html 和css文件 然后通过这个文件的app-complie 放到根木来渲染出页面效果，当然后面会介绍用哦过路由联系各个模块，了解下就行了。
selector: 'app-compile',
templateUrl: './compile.component.html',
styleUrls: ['./compile.component.scss']
1.路由模块
路由：就是根据不同url地址，动态的让根木组件挂载其他组件来实现单页面的应用（相当于跳转）。
当然这链接要比模块链接更加灵活后面还会学懒加载，属于路由的一种用法。
首先 如果你的模块需要路由 需要你自己创建一个路由，通过路由来和根目录app路由进行链接。当然这里先介绍根木路由的用法在介绍自定义路由。
首先我们要先找到 app-routing.module.ts 这个文件，第一个单词是可以自定义的名字后面是固定写法路由自己跟你加上去的。
第二步
把你创建好的组件直接在路由上面进行引用。
如下面例题
.png)
上面的红箭头是我自己创建出来的组件来进行演示效果这里你们可以自己定义。
第三步
加载组件
.png)
代码
path: '', component: ''
前面你的文件名称，后面就是你组件模块名称，通过在网页上面输入网址地址那块，加上斜杠加上组件名称就可以跳转到你组件里面的类容就会渲染到页面上。
当然要注意：
根目录或者说是从一个模块跳转到另一个模块需要有
<router-outlet></router-outlet>
这个是动态加载路由。
2.父子路由
其实就是在一个模块里面创建一个路由通过路由来父路由来链接子组件，在通过父路由链接 根目录路由，这样的链接就是一层套一层就向我说的树形链接最终都是通过app根目录来渲染到页面上。
我们之前都知道 自定义模块 其实就是在模块里面在家一个路由而已，不在用模块来链接根目录通过路由来链接根目录跟方便。
创建一个代有路由的模块
使用--module参数指定模块。例如，如果主模块是app.module.ts，请运行以下命令：
ng g c new-component --module app
或者，如果您在其他目录中
ng g c component-name --module ../
通过在父文件里面创建一2个子组件。
比如我的一个列表下面好获得子列表文件
.png)
一个是欢迎文件一个是列表详细组件。
通过设定路由如下
.png)
这里要注意下在设置子路由一定要重新声明一个数组对象。通过配置children可实现多层嵌套，就是路由套路由。
这个children属性是返回所以子元素合集。
后面也是当没有被选定路由就默认为welcome欢迎组件。
点击跳转属性绑定
[routerLink]="['right']"
在跳转路由 要注意下：
路由跳转跟路径没关系主要是跟你的路由配置来进行跳转代码如下
比如我在根目录配置跳转到我父组件
path: 'log',
loadChildren: './module/log/log.module#LogModule'
},
{
path: 'list',
loadChildren: './pages/list/list.module#ListModule'
},
{
path: '**',
redirectTo: 'log'
},
];
通过登陆路由默认直接跳转是 登陆页面通过APP HTML根组件跳转 然后登陆成功后进行跳转
THML代码
this.route.navigate(['/list/']);
这里要注意下 如果在跳转其他路由 写的双斜杠的话 那么跳转子路由就不能写斜杠了代码如下
<a class="fs_color" [routerLink]="[ 'welcome' ]">
因为路由跳转是跟ULR有关如图
.png)
3.懒加载
前面都理解那么后面这个就是懒加载，基本上以后所以模块都会通过懒加载的模式来进行链接跳转，原因好像就是为了优化页面加载速度。
在创建模块的同时创建路由
代码如下
ng g module module/user --routing
当你创建一个模块的时候需要加路由的话，后面需要跟个 --routing
然后在创建目录如图
.png)
然后在路由上面自己配置子路由
import { ArticleComponent } from './article.component';
const routes: Routes = [
{
path:'',component:ArticleComponent
}
];
当访问的时候是空，路由访问的默认是当前自己的组件，而且配置路由和根组件app配置路由是一样的。
这样就不需要引入组件了只需要在
const routes: Routes = [
{
path:'user',loadChildren:'./module/user/user.module#UserModule'
}
];
要通过loadChildren来加载我的user模块然后加个#号后面跟着我们模块的名称
UserModule，路径一定要写对。
如图
.png)
之前学的是通过模块加载模块 而这个就是通过路由来加载模块
这里要注意下
<a [routerLink]="[ '/user' ]">用户模块</a>
<a [routerLink]="[ '/product' ]">商品模块</a>
<a [routerLink]="[ '/article' ]">文章模块</a>
根模块中进行跳转的时候 后面的组件名字一定要对的上 不然你其他配置都是对的，就这个地方出错跳转也不会跳转到你想跳转的组件。
然后在路由上面配置个默认加载模块代码如下
{
path:'**',redirectTo:'user'
},
当路由加载没有指定模块的时候就默认加载user模块里面的组件
同时我们可以在自己的模块下面创建子路由的跳转如图
.png)
那怎么实现跳转就直接在父模块里面进行配置路由就行了。
这里要注意下
如果你不是配置的父子路由的话是这样的
const routes: Routes = [
{
path:'',component:UserComponent,
},
{
path:'address',component:AddressComponent,
},
{
path:'teacher',component: TeacherComponent,
},
];
它是类似直接跳转的。
.png)
如果你写的是路由父子级关系那么它的跳转就是这样的
代码如下
const routes: Routes = [
{
path:'',component:UserComponent,
children:[
{
path:'address',component:AddressComponent,
},
{
path:'teacher',component: TeacherComponent,
},
]
},
];
//这样就是局部刷新整体页面不会刷新的。
在跳转路由 要注意下：
路由跳转跟路径没关系主要是跟你的路由配置来进行跳转代码如下
比如我在根目录配置跳转到我父组件
path: 'log',
loadChildren: './module/log/log.module#LogModule'
},
{
path: 'list',
loadChildren: './pages/list/list.module#ListModule'
},
{
path: '**',
redirectTo: 'log'
},
];
通过登陆路由默认直接跳转是 登陆页面通过APP HTML根组件跳转 然后登陆成功后进行跳转
THML代码
this.route.navigate(['/list/']);
这里要注意下 如果在跳转其他路由 写的双斜杠的话 那么跳转子路由就不能写斜杠了代码如下
<a class="fs_color" [routerLink]="[ 'welcome' ]">
因为路由跳转是跟ULR有关如图
.png)
返回列表
评论