首页 › Angular论坛 › angular

程家阳 發表於 2023-4-20 15:59:00

angular

<h2>简介</h2>
<p>中文官网参考：https://angular.cn/</p>
<p>Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。。<br>Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。</p>
<p>&nbsp;</p>
<h2>环境搭建</h2>
<h3>nodejs安装</h3>
<p>1.nodejs安装(前提)</p>
<p>下载安装：http://nodejs.cn/download/</p>
<div class="cnblogs_code">
<pre>node -<span style="color: rgba(0, 0, 0, 1)">v      显示安装的nodejs版本
npm </span>-v      显示安装的npm版本</pre>
</div>
<p>2.更换npm源为淘宝镜像</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">npm config get registry#查看
npm config set registry https:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npm.taobao.org/</span></pre>
</div>
<p>3.typescript安装</p>
<div class="cnblogs_code">
<pre>npm <span style="color: rgba(0, 0, 255, 1)">install</span> typescript -g</pre>
</div>
<p>4.讲ts文件编译成js</p>
<p>新建一个ts文件</p>
<p>编译</p>
<div class="cnblogs_code">
<pre>tsc first.ts</pre>
</div>
<p>使用node运行js</p>
<div class="cnblogs_code">
<pre>node first.js</pre>
</div>
<p>这样需要先编译后运行，效率比较慢，可以直接使用如下命令编译和运行一起</p>
<p>注意：需要安装ts-node</p>
<div class="cnblogs_code">
<pre>npm <span style="color: rgba(0, 0, 255, 1)">install</span> -g ts-node</pre>
</div>
<p>&nbsp;</p>
<div class="cnblogs_code">
<pre>ts-node first.ts</pre>
</div>
<p>&nbsp;</p>
<p>我们使用vscode</p>
<p>5.vscode安装（包括插件安装）</p>
<p>6.vscode终端中运行命令报错解决，参考：https://www.cnblogs.com/annong/p/14931332.html</p>
<p>管理员权限打开PowerShell输入</p>
<div class="cnblogs_code">
<pre>set-ExecutionPolicy RemoteSigned</pre>
</div>
<p>然后重启vscode</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221103134503801-876774410.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>7.在vscode终端中输入</p>
<div class="cnblogs_code">
<pre>tsc --init</pre>
</div>
<p>我们可以看到多了一个文件tsconfig.json</p>
<p>&nbsp;</p>
<h3>angular安装</h3>
<p>1.使用npm 命令安装 angular/cli(全局安装，只需要安装一次)</p>
<div class="cnblogs_code">
<pre>npm <span style="color: rgba(0, 0, 255, 1)">install</span> -g @angular/cli</pre>
</div>
<p>相关命令</p>
<p>ng version</p>
<p>ng help</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Commands:
ng add </span>&lt;collection&gt;            Adds support <span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> an external library to your project.
ng analytics                   Configures the gathering of Angular CLI usage metrics. See https:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">angular.io/cli/usage-analytics-gathering</span>
ng build              Compiles an Angular application or library into an output directory named dist/<span style="color: rgba(0, 0, 0, 1)"> at the given output path.            ng cache                     Configure persistent disk cache and retrieve cache statistics.
ng completion                  Set up Angular CLI autocompletion </span><span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> your terminal.
ng config Retrieves or sets Angular configuration values <span style="color: rgba(0, 0, 255, 1)">in</span> the angular.json <span style="color: rgba(0, 0, 255, 1)">file</span> <span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> the workspace.
ng deploy             Invokes the deploy builder </span><span style="color: rgba(0, 0, 255, 1)">for</span> a specified project or <span style="color: rgba(0, 0, 255, 1)">for</span> the default project <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> the workspace.
ng doc </span>&lt;keyword&gt;               Opens the official Angular documentation (angular.io) <span style="color: rgba(0, 0, 255, 1)">in</span> a browser, and searches <span style="color: rgba(0, 0, 255, 1)">for</span> a given keyword.                ng e2e                Builds and serves an Angular application, <span style="color: rgba(0, 0, 255, 1)">then</span> runs end-to-end tests.                                                ng extract-<span style="color: rgba(0, 0, 0, 1)">i18n       Extracts i18n messages from source code.
ng generate                  Generates and</span>/or modifies files based on a schematic.                                                                ng lint             Runs linting tools on Angular application code <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> a given project folder.
ng new                   Creates a new Angular workspace.                                                                                     ng run </span>&lt;target&gt;                Runs an Architect target with an optional custom builder configuration defined <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> your project.
ng serve              Builds and serves your application, rebuilding on </span><span style="color: rgba(0, 0, 255, 1)">file</span> changes.                                                      ng test             Runs unit tests <span style="color: rgba(0, 0, 255, 1)">in</span> a project.                                                                                        ng update          Updates your workspace and its dependencies. See https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">update.angular.io/.</span>
ng version                     Outputs Angular CLI version.    </pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>2.创建angular项目</p>
<div class="cnblogs_code">
<pre>ng new firstDemo</pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221103142932212-171228078.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;3.运行项目,注意必须要先定位到当前项目文件夹内</p>
<div class="cnblogs_code">
<pre>ng serve --open</pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221103143040438-17875335.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;4.使用vscode打开项目文件夹</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221103143409729-1083417680.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;5.创建自己的组件</p>
<p>&nbsp;<code>ng generate component &lt;component-name&gt;</code></p>
<div class="cnblogs_code">
<pre>ng g c components/news</pre>
</div>
<p>&nbsp;</p>
<h2>模块NgModule</h2>
<h3>介绍</h3>
<p>NgModule 是一个带有 @NgModule 装饰器的类。</p>
<p>Angular 模块把组件、服务、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。</p>
<p>NgModule 的元数据会做这些：</p>
<ul>
<li>声明某些组件、指令和管道属于这个模块。</li>
<li>公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们。</li>
<li>导入其它带有组件、指令和管道的模块，这些模块中的元件都是本模块所需的。</li>
<li>提供一些供应用中的其它组件使用的服务。</li>
</ul>
<h3>常用模块</h3>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110102058568-1719315682.png" alt="" loading="lazy"></p>
<p>&nbsp;&nbsp;</p>
<h3>&nbsp;模块分类</h3>
<p>1.文件模块：框架代码以模块形式组织</p>
<p>内置模块</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110102318346-42005991.png" alt=""></p>
<p>2.应用模块：功能单元以模块形式组件</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110102354376-2121646216.png" alt=""></p>
<p>&nbsp;<img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110102611213-655620342.png" alt=""></p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110102712584-1168650838.png" alt=""></p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110102750581-131588902.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110103813041-1714880289.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>自定义模块</h3>
<p>当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项目。并且通过 Angular自定义模块可以实现路由的懒加载。</p>
<p>新建模块命令：</p>
<div class="cnblogs_code">
<pre>ng g module module/user   <br><br>//如果需要创建带路由的模块，执行如下命令<br><br><code>ng g module module/product --routing</code></pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110104033332-1607311564.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;在user模块下面新建一个根组件</p>
<div class="cnblogs_code">
<pre>ng g component module/user</pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110104325939-934722563.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>在 user 模块下新建 address,order,profile 组件&nbsp;</p>
<div class="cnblogs_code">
<pre>ng g component module/user/components/<span style="color: rgba(0, 0, 0, 1)">address
ng g component module</span>/user/components/<span style="color: rgba(0, 0, 0, 1)">order
ng g component module</span>/user/components/profile</pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110104519190-1725034012.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>自定义模块挂载&nbsp;</h3>
<p><span style="color: rgba(255, 0, 0, 1)">如何在根模块挂载 自定义的user 模块呢？</span></p>
<p>1.在 app.module.ts 引入自己创建的user模块</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110105018608-273458585.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;2.user 模块的根模块中要暴露出 需要被外界访问到的组件</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110105421727-326999892.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;3.在根模板 app.component.html 里引入</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110105511854-1669190380.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;注意：如果需要在根组件里直接 使用 app-address 组件，也是需要先在 user 模块 user.module.ts 暴露</p>
<p>&nbsp;</p>
<h3>自定义模块内创建服务</h3>
<p>1.创建</p>
<div class="cnblogs_code">
<pre>ng g service module/user/services/common</pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>组件Components</h2>
<h3>介绍</h3>
<p>组件是构成应用的砖块。组件包括三个部分：带有&nbsp;<code>@Component()</code>&nbsp;装饰器的 TypeScript 类、HTML 模板和样式文件。<code>@Component()</code>&nbsp;装饰器会指定如下 Angular 专属信息：</p>
<ul>
<li>
<p>一个 CSS 选择器，用于定义如何在模板中使用组件。模板中与此选择器匹配的 HTML 元素将成为该组件的实例。</p>
</li>
<li>
<p>一个 HTML 模板，用于指示 Angular 如何渲染此组件</p>
</li>
<li>
<p>一组可选的 CSS 样式，用于定义模板中 HTML 元素的外观</p>
</li>
</ul>
<h3>&nbsp;</h3>
<h3>&nbsp;</h3>
<h3>生命周期钩子</h3>
<p>参考：https://angular.cn/guide/lifecycle-hooks</p>
<p>当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。</p>
<p>你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;

@Component({
selector: </span>'app-lifecycle'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./lifecycle.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./lifecycle.component.css'<span style="color: rgba(0, 0, 0, 1)">]
})
export class LifecycleComponent implements OnInit {

title:string</span>=''<span style="color: rgba(0, 0, 0, 1)">
age:number</span>=0<span style="color: rgba(0, 0, 0, 1)">
constructor() {
    console.log(</span>'构造函数constructor：对变量初始化'<span style="color: rgba(0, 0, 0, 1)">)
}


ngOnChanges(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngOnChanges：子组件绑定的属性值发生变化时调用'<span style="color: rgba(0, 0, 0, 1)">)
}
ngOnInit(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngOnInit：用来向后台请求数据，只执行一次'<span style="color: rgba(0, 0, 0, 1)">)
}
ngDoCheck(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngDoCheck：'<span style="color: rgba(0, 0, 0, 1)">)
}
ngAfterContentInit(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngAfterContentInit：'<span style="color: rgba(0, 0, 0, 1)">)
}
ngAfterContentChecked(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngAfterContentChecked：'<span style="color: rgba(0, 0, 0, 1)">)
}
ngAfterViewInit(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngAfterViewInit：当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用，只执行一次'<span style="color: rgba(0, 0, 0, 1)">)
}
ngAfterViewChecked(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngAfterViewChecked：'<span style="color: rgba(0, 0, 0, 1)">)
}
ngOnDestroy(): </span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> {
    console.log(</span>'ngOnDestroy：Angular 销毁指令或组件之前立即调用'<span style="color: rgba(0, 0, 0, 1)">)
}

setTitle():</span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.title='title change'<span style="color: rgba(0, 0, 0, 1)">
}


}</span></pre>
</div>
<p>&nbsp;</p>
<h3>组件交互</h3>
<p><strong>父组件将值传递给子组件</strong></p>
<p>1.在子组件中导入Input模块</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit,Input } from '@angular/core';</pre>
</div>
<p>2.在子组件中定义要从父组件中接收的变量</p>
<div class="cnblogs_code">
<pre> @Input() product!<span style="color: rgba(0, 0, 0, 1)">:Product
@Input() title:string</span>=''</pre>
</div>
<p>3.在父组件中定义变量数据</p>
<p>4.在父组件的view中绑定数据</p>
<div class="cnblogs_code">
<pre>&lt;app-hero-child ="product"&gt;&lt;/app-hero-child&gt;</pre>
</div>
<p><strong>父组件将方法传递给子组件</strong></p>
<p>1.在父组件中定义一个方法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">doParent(){
    alert(</span>'这是父组件的方法'<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<p>2.在父组件的html中传递方法</p>
<div class="cnblogs_code">
<pre>&lt;app-hero-child ="product" ="doParent"&gt;&lt;/app-hero-child&gt;</pre>
</div>
<p>3.在子组件中导入Input模块</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit,Input } from '@angular/core';</pre>
</div>
<p>4.在子组件中定义要从父组件中接收的方法变量</p>
<div class="cnblogs_code">
<pre>@Input() doParent:any</pre>
</div>
<p>5.在子组件中定义一个方法调用父方法变量　　</p>
<p>注意：父方法变量不能和子组件中的方法重名</p>
<div class="cnblogs_code">
<pre>doParentMethord():<span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.doParent()

}</span></pre>
</div>
<p>&nbsp;</p>
<p><strong>在父组件中获取子组件的数据和方法&nbsp;@ViewChild()</strong></p>
<p>1.父组件中加#childItem</p>
<div class="cnblogs_code">
<pre>&lt;app-hero-child #childItem ="product" ="doParent" (showTitle)="showTitle($event)"&gt;&lt;/app-hero-child&gt;</pre>
</div>
<p>2.父组件中接收</p>
<div class="cnblogs_code">
<pre>@ViewChild("childItem"<span style="color: rgba(0, 0, 0, 1)">)
childItem</span>!:HeroChildComponent</pre>
</div>
<p>3.子组件定义数据和方法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">calc(a:number,b:number):number{
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> a+<span style="color: rgba(0, 0, 0, 1)">b;
}</span></pre>
</div>
<p>&nbsp;</p>
<p>4.父组件调用</p>
<div class="cnblogs_code">
<pre>calc():<span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)">{
    let result </span>= <span style="color: rgba(0, 0, 255, 1)">this</span>.childItem.calc(3, 4<span style="color: rgba(0, 0, 0, 1)">);
    alert(result)
}</span></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&nbsp;模板</h2>
<h3>绑定</h3>
<p><strong>文本插值</strong></p>
<p>{{}}是模板表达式</p>
<p>使用{{ }}</p>
<p>说明：但组件中定义的数据发生改变时会自动刷新模板中的值</p>
<p><strong>Attribute绑定</strong></p>
<p>注意：attribute绑定的是标签本身自有的属性或者自己定义的属性</p>
<p>Attribute 绑定语法类似于 Property 绑定，但不是直接在方括号之间放置元素的 Property，而是在 Attribute 名称前面加上前缀 attr，后跟一个点 .。然后，使用解析为字符串的表达式设置 Attribute 值。</p>
<div class="cnblogs_code">
<pre>&lt;p ="expression"&gt;&lt;/p&gt;</pre>
</div>
<p><strong>Property&nbsp;绑定</strong></p>
<p>注意：property绑定的是标签在javascript中具有的属性，</p>
<p>ps:</p>
<div class="cnblogs_code">
<pre>&lt;a ="title" ="url" ="url"&gt;超链接&lt;/a&gt;</pre>
</div>
<p>生成如下：</p>
<div class="cnblogs_code">
<pre>&lt;a _ngcontent-fxg-c49="" href="http://www.baidu.com" myattr="标题"&gt;超链接&lt;/a&gt;</pre>
</div>
<p>结论：myattr是我们自定义的attribute，href既是a标签本身的attribute，也是a标签在JavaScript中的属性（document.getElementsByName("a").href）</p>
<p><strong>管道</strong></p>
<p>使用管道来转换字符串、货币金额、日期和其他数据以进行显示。</p>
<p>管道是在模板表达式中使用的简单函数，用于接受输入值并返回转换后的值。管道很有用</p>
<p>&nbsp;</p>
<p><strong>模板引用变量</strong></p>
<p>在模板中，要使用井号&nbsp;<code>#</code>&nbsp;来声明一个模板变量。下列模板变量&nbsp;<code>#phone</code>&nbsp;声明了一个名为&nbsp;<code>phone</code>&nbsp;的变量，其值为此&nbsp;<code>&lt;input&gt;</code>&nbsp;元素。</p>
<div class="cnblogs_code">
<pre>&lt;input #phone placeholder="phone number" /&gt;</pre>
</div>
<p>可以在组件模板中的任何地方引用某个模板变量。这里的&nbsp;<code>&lt;button&gt;</code>&nbsp;就引用了&nbsp;<code>phone</code>&nbsp;变量。</p>
<div class="cnblogs_code">
<pre>&lt;button type="button" (click)="callPhone(phone.value)"&gt;Call&lt;/button&gt;</pre>
</div>
<p>&nbsp;</p>
<h2>指令</h2>
<p>指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。</p>
<h3>内置属性型指令</h3>
<p>ngClass</p>
<div class="cnblogs_code">
<pre>&lt;div=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{'class1':true,'class2':false   }</span><span style="color: rgba(128, 0, 0, 1)">"</span> &gt;ngclass&lt;/div&gt;</pre>
</div>
<p>ngStyle</p>
<div class="cnblogs_code">
<pre>&lt;div =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{'color':'red','font-size':'22px'}</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;ngstyle&lt;/div&gt;</pre>
</div>
<p>ngModel</p>
<h3>内置结构型指令</h3>
<p><strong>ngIf</strong></p>
<p>NgIf 指令应用于宿主元素来添加或删除元素。</p>
<div class="cnblogs_code">
<pre>&lt;span *ngIf="isFlag"&gt;我是flag&lt;/span&gt;
&lt;button (click)="changeFlag()"&gt;隐藏显示flag&lt;/button&gt;</pre>
</div>
<p><strong>ngFor</strong></p>
<div class="cnblogs_code">
<pre>&lt;ul&gt;
    &lt;li *ngFor="let item of colors;let index=index"&gt;{{item}}&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
<p>&nbsp;</p>
<p><strong>NgSwitch</strong></p>
<div class="cnblogs_code">
<pre>&lt;h3&gt;<span style="color: rgba(0, 0, 255, 1)">switch</span>&lt;/h3&gt;
&lt;ul ="switch"&gt;
&lt;li ngSwitch="1"&gt;我是主要的&lt;/li&gt;
&lt;li ngSwitch="2"&gt;我是次要的&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
<h3>自定义指令</h3>
<p>自定义属性指令，可以额外的给标签元素增加属性、事件、处理输入值&nbsp;</p>
<p>1.创建</p>
<div class="cnblogs_code">
<pre> ng generate directive directive/highlight</pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110134528674-1979708543.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="cnblogs_code">
<pre>&lt;div appHighlight &gt;使用自定义指令&lt;/div&gt;</pre>
</div>
<p>也可以定义id、类选择器指令</p>
<p>3.处理用户事件</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221110135311551-956590485.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>依赖注入&amp;服务</h3>
<p>&nbsp;</p>
<p>1.创建服务</p>
<div class="cnblogs_code">
<pre>ng g service services/product</pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221109115828027-594046155.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;2.在组件中引入服务模块，然后通过构造器依赖注入</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221109115742166-1620726416.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;注意：构造器中的变量必须要带private或者public&nbsp;</p>
<h2>&nbsp;表单</h2>
<p>在app.modules.ts中要引入ReactiveFormsModule模块</p>
<div class="cnblogs_code">
<div>import { FormsModule, ReactiveFormsModule } from '@angular/forms';</div>
</div>
<p>然后还要导入模块</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221109132112470-1701609169.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>响应式表单</h3>
<p><strong>FormControl&nbsp;</strong></p>
<p>1.在组件中导入表单控件</p>
<div class="cnblogs_code">
<pre>import { FormControl } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/forms</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>2.在组件中创建一个FormControl实例</p>
<div class="cnblogs_code">
<pre>myForm=new FormControl(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">ddd</span><span style="color: rgba(128, 0, 0, 1)">'</span>);</pre>
</div>
<p>3.在模板中注册这个FormControl</p>
<div class="cnblogs_code">
<pre>&lt;input =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">myForm</span><span style="color: rgba(128, 0, 0, 1)">"</span> &gt;</pre>
</div>
<p><strong>FormGroup</strong></p>
<p>讲多个formControl放到一个组内</p>
<p>1.导入FromGroup模块　　</p>
<div class="cnblogs_code">
<pre>import { FormControl,FormGroup } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/forms</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>2.实例化一个FromGroup</p>
<div class="cnblogs_code">
<pre>formGroup=<span style="color: rgba(0, 0, 0, 1)">new FormGroup({
    name:new FormControl(</span><span style="color: rgba(128, 0, 0, 1)">''</span><span style="color: rgba(0, 0, 0, 1)">),
    age:new FormControl(),
    sex:new FormControl
})</span></pre>
</div>
<p>3.模板中使用</p>
<div class="cnblogs_code">
<pre>&lt;form =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">formGroup</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
&lt;div&gt;
    &lt;label&gt;名称&lt;/label&gt;&lt;input type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(128, 0, 0, 1)">"</span> formControlName=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">name</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;label&gt;年龄&lt;/label&gt;&lt;input type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(128, 0, 0, 1)">"</span> formControlName=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">age</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;label&gt;性别&lt;/label&gt;
    &lt;<span style="color: rgba(0, 0, 255, 1)">select</span> formControlName=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">sex</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
      &lt;option value=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">1</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;男&lt;/option&gt;
      &lt;option value=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">0</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;女&lt;/option&gt;
    &lt;/<span style="color: rgba(0, 0, 255, 1)">select</span>&gt;
&lt;/div&gt;
&lt;button (click)=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">confirm()</span><span style="color: rgba(128, 0, 0, 1)">"</span> =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">!formGroup.valid</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;提交&lt;/button&gt;
&lt;/form&gt;</pre>
</div>
<p>4.组件中接收</p>
<div class="cnblogs_code">&nbsp;</div>
<p>&nbsp;</p>
<h3>模板表单</h3>
<p>1.组件中定义变量</p>
<p>2.模板中用ngModel绑定</p>
<div class="cnblogs_code">
<pre>&lt;input [(ngModel)]=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;{{title}}</pre>
</div>
<p>&nbsp;</p>
<h3>动态表单</h3>
<p>动态表单是基于响应式表单的，为了让应用访问响应式表达式指令，根模块会从 @angular/forms 库中导入 ReactiveFormsModule。</p>
<div class="cnblogs_code">
<pre>import { ReactiveFormsModule } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/forms</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>http数据请求</h2>
<p>1.在app.modules.ts中引入：</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221109071819289-1872812264.png" alt="" loading="lazy"></p>
<p>&nbsp;2.把 HttpClient 服务注入成一个应用类的依赖项</p>
<p>创建一个服务config：ng g s services/config&nbsp;</p>
<div class="cnblogs_code">
<pre>import { HttpClient } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/common/http</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import { Injectable } from </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;

@Injectable({
providedIn: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">root</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">
})
export class ConfigService {

constructor(private http:HttpClient) { }
}</span></pre>
</div>
<p>3.在configService中引入</p>
<div class="cnblogs_code">
<pre>import { Observable, throwError } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">rxjs</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import { catchError, retry } from </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">rxjs/operators</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>4.调用</p>
<div class="cnblogs_code">
<pre>    this.http.get(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">url</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">, {
    }).subscribe((response) </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {


    })</span></pre>
</div>
<p>&nbsp;</p>
<h2>路由</h2>
<p>&nbsp;路由就是根据不同的url地址，动态的让根组件挂载其它组件来实现一个单页面应用。</p>
<p><strong>定义路由</strong></p>
<p>1.新建项目时选择路由，会自动在根模块导入路由相关依赖，同时会生成一个路由配置文件app-routing.module.ts</p>
<p>2.在app-routing.module.ts中的Routes数组定义你的路由</p>
<p><img src="https://img2022.cnblogs.com/blog/559600/202211/559600-20221109144409702-1357799136.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;3.把路由添加到应用中</p>
<p>注意：组件模板要包含 &lt;router-outlet&gt; 标签。该元素会通知 Angular，你可以用所选路由的组件更新应用的视图。</p>
<p>&nbsp;</p>
<div class="cnblogs_code">
<pre>&lt;nav&gt;
    &lt;a routerLink=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">home</span><span style="color: rgba(128, 0, 0, 1)">"</span> routerLinkActive=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">active</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;主页&lt;/a&gt;
    &lt;a routerLink=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">news</span><span style="color: rgba(128, 0, 0, 1)">"</span> routerLinkActive=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">active</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;新闻&lt;/a&gt;
    &lt;a routerLink=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">product</span><span style="color: rgba(128, 0, 0, 1)">"</span> routerLinkActive=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">active</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;产品&lt;/a&gt;
&lt;/nav&gt;

&lt;router-outlet&gt;&lt;/router-outlet&gt;</pre>
</div>
<p><strong>路由传值</strong></p>
<p>1.设置要传递到路由组件内部的参数</p>
<div class="cnblogs_code">
<pre>&lt;a routerLink=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">news</span><span style="color: rgba(128, 0, 0, 1)">"</span> =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{name:'jack'}</span><span style="color: rgba(128, 0, 0, 1)">"</span>routerLinkActive=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">active</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;新闻&lt;/a&gt;</pre>
</div>
<p>2.组件导入</p>
<div class="cnblogs_code">
<pre>import { Router, ActivatedRoute, ParamMap } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/router</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>3.获取值</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">ngOnInit(): void {
    this.route.queryParams.subscribe(params </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      this.name </span>= params[<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">name</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">];
    });
}</span></pre>
</div>
<p>&nbsp;</p>
<p>嵌套路由</p>
<p>设置页面标题</p>
<p>&nbsp;</p>

</div>
<div id="MySignature" role="contentinfo">
    <div style="background: none repeat scroll 0 0 #e7f4ff; margin: 0 10px 0 0; padding: 12px 15px; color: #666; font-size: 16px; border: 12px solid #c9ddfa">
<span>作者：梦亦晓，转载请注明出处</span>
<div>

<div>
如果此文能给您提供帮助，请点击右下角的【<span style="color: red">推荐</span>】
</div>
<div>
如果您对此文有不同的见解或者意见，欢迎留言讨论
</div>
</div></div><br><br>
来源：https://www.cnblogs.com/eggTwo/p/16854227.html

查看完整版本: angular