Angular独立组件简单体验
<h2 id="前言">前言</h2><p>Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。</p>
<p>在Angular 14中， 开发者可以尝试使用独立组件开发各种组件，但是值得注意的是Angular独立组件的API仍然没有稳定下，将来可能存在一些破坏性更新，所以不推荐在生产环境中使用。</p>
<h2 id="如何创建一个独立组件">如何创建一个独立组件</h2>
<p>对于已有的组件，我们可以在<code>@Component()</code>中添加<em>standalone: true</em>的标识，然后我们可以在没有<code>@NgModule()</code>的情况下直接使用<code>imports</code>导入其他模块了。<br>
如果是新建组件，可以使用<code>ng generate component <name> --standalone</code>的命令，直接创建一个独立组件, 例如：</p>
<pre><code class="language-bash">ng generate component button-list --standalone
</code></pre>
<pre><code class="language-javascript">@Component({
selector: 'app-button-list',
standalone: true,
imports: [
CommonModule,
],
templateUrl: './button-list.component.html',
styleUrls: ['./button-list.component.scss']
})
export class ButtonListComponent implements OnInit
</code></pre>
<h2 id="在独立组件中导入已有的模块">在独立组件中导入已有的模块</h2>
<p>我们可以在<code>imports</code>中添加已有的模块，以<code>MatButtonModule</code>为例：</p>
<pre><code class="language-typesscript">imports: [
CommonModule,
MatButtonModule,
],
</code></pre>
<p>这样子我们就可以在<code>ButtonListComponent</code>中使用<code>MatButtonModule</code>的<code>mat-button</code>组件了：</p>
<pre><code class="language-html"><button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>
</code></pre>
<p>效果图：</p>
<p><img src="https://img2022.cnblogs.com/blog/1001991/202206/1001991-20220609213332166-2060085899.png"></p>
<h2 id="使用独立组件启动angular应用">使用独立组件启动Angular应用</h2>
<p>第一步， 将<code>AppComponent</code>设置为独立组件：</p>
<pre><code class="language-javascript">@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
standalone: true,
})
export class AppComponent {
...
}
</code></pre>
<p>第二步，将<code>AppModule</code>的imports中的导入的模块加入到<code>AppComponent</code>的imports中,但是有两个模块例外： <code>BrowserModule</code>和<code>BrowserAnimationsModule</code>。</p>
<p>如果导入的话，可能会导致** <code>BrowserModule</code> have already been loaded. If you need access to common directives such as NgIf and NgFor, import the <code>CommonModule</code> instead.**的问题：</p>
<p><img src="https://img2022.cnblogs.com/blog/1001991/202206/1001991-20220609213350747-1265864872.png"></p>
<p>第三步，删除<code>app.module.ts</code>文件</p>
<p>最后一步， 将<code>main.ts</code>中的：</p>
<pre><code class="language-javascript">import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
</code></pre>
<p>改为：</p>
<pre><code class="language-javascript">bootstrapApplication(AppComponent).catch(err => console.error(err));
</code></pre>
<p>这样子我们就实现了使用独立组件启动Angular组件了。</p>
<h2 id="为独立组件配置路由">为独立组件配置路由</h2>
<p>我这里分别有三个独立组件： <code>HomeComponent</code>, <code>ButtonListComponent</code> 和 <code>ChipListComponent</code>，</p>
<p>然后在<code>main.ts</code>中创建<strong>ROUTES</strong>对象</p>
<pre><code class="language-typescript">const ROUTES: Route[] = [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'button',
loadComponent: () =>
import('./app/button-list/button-list.component').then(
(mod) => mod.ButtonListComponent
),
},
{
path: 'chip',
loadComponent: () =>
import('./app/chip-list/chip-list.component').then(
(mod) => mod.ChipListComponent
),
},
];
</code></pre>
<p>其中<code>ButtonListComponent</code>和<code>ChipListComponent</code>使用<code>loadComponent</code>去实现路由懒加载。</p>
<p>最后在<code>bootstrapApplication</code>的第二个参数中使用<code>providers</code>注册<code>RouterModule</code>好了。</p>
<pre><code class="language-javascript">bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(RouterModule.forRoot([...ROUTES])),
],
}).catch(err => console.error(err));
</code></pre>
<p>效果图：</p>
<p><img src="https://damingerdai.github.io/front-end/angular-standalone-components-app/angular-standalone-components-app-button-list.gif"></p>
<h2 id="配置依赖注入">配置依赖注入</h2>
<p>当我们想要启动Angular应用的时候，可能需要注入一些值或者服务。 在<code>bootstrapApplication</code>, 我们可以通过<code>providers</code>来注册值或者服务。</p>
<p>比如，我有一个获取图片的url，需要注入到<code>PhotoService</code>中：</p>
<pre><code class="language-javascript">bootstrapApplication(AppComponent, {
providers: [
{
provide: 'photoUrl',
useValue: 'https://picsum.photos',
},
{provide: PhotosService, useClass: PhotosService },
importProvidersFrom(RouterModule.forRoot([...ROUTES])),
importProvidersFrom(HttpClientModule)
],
})
</code></pre>
<p><code>PhotoService</code>代码如下：</p>
<pre><code class="language-javascript">@Injectable()
export class PhotosService {
constructor(
@Inject('photoUrl') private photoUrl: string,
private http: HttpClient
) { }
public getPhotoUrl(i: number): string {
return `${this.photoUrl}/200/300?random=${i}`;
}
}
</code></pre>
<h2 id="源代码">源代码</h2>
<p>本文所使用的源代码</p>
<p>线上demo</p>
<h2 id="参考资料">参考资料</h2>
<ol>
<li>Angular v14 is now available!</li>
<li>Getting started with standalone components</li>
<li>Angular Material</li>
</ol><br><br>
来源：https://www.cnblogs.com/xiao2/p/16361283.html
頁:
[1]