首页 › Angular论坛 › angular如何引用其他组件

莫亦舞 發表於 2022-9-5 13:21:00

angular如何引用其他组件

<p>原文链接：angular如何引用其他组件 – 每天进步一点点 (longkui.site)</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="primary" class="boxed-layout-header page-header header-small" data-parallax="active">&nbsp;</div>
<div class="mainmain-raised ">
<div class="blog-post blog-post-wrapper">
<div class="container">
<div class="row">
<div class="col-md-8 single-post-container" data-layout="sidebar-right">
<div class="single-post-wrap entry-content">
<h5>0.背景</h5>
<p>前面一篇文章，简单介绍过angular创建并引用组件。在实际情况开发中，情况会稍微复杂一些，今天这篇文章就简单介绍一下，稍微复杂一点组件引用。</p>
<p>场景：</p>
<p>在一个组件内，切换多个组件。</p>
<p>组件一：city（带module和routing）</p>
<p>组件二：student(只是component)</p>
<p>组件三：car(带moudule)</p>
<p>组件四：teacher(只是component)</p>
<p>这几个组件相互独立（即时是包含关系也没问题，只有路径引用对了即可），关于如何单独访问这样的组件，可以参考我写的这几篇文章：</p>
<p>angular中的路由详解(1)—默认路由的用法 – 每天进步一点点 (longkui.site)</p>
<p>angular中的路由详解(2)—访问路由的一些姿势以及页面传参 – 每天进步一点点 (longkui.site)</p>
<p>angular中的路由详解(3)—通过module和子路由来访问组件 – 每天进步一点点 (longkui.site)</p>
<p>下面开始介绍一下如何引用这些组件。</p>
<h5>1.component直接引用component</h5>
<p>创建teacher组件：</p>
<pre class="wp-block-code"><code>ng g c teacher</code></pre>
<img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/2022042901.png">
<p>然后创建student组件</p>
<pre class="wp-block-code"><code>ng g c student</code></pre>
<img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/2022042809.png">
<p>然后在teacher中调用。</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> Component, OnInit <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'@angular/core'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text">StudentComponent<span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'../student/student.component'<span class="enlighter-text"> <span class="enlighter-c0"> //导入student组件，</span></span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">@<span class="enlighter-m0">Component<span class="enlighter-g1">({</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> selector: <span class="enlighter-s0">'app-teacher'<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> templateUrl: <span class="enlighter-s0">'./teacher.component.html'<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> styleUrls: <span class="enlighter-g1">[<span class="enlighter-s0">'./teacher.component.css'<span class="enlighter-g1">]</span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-g1">})</span></span></div>
</div>
<div>
<div><span class="enlighter-text">export <span class="enlighter-k1">class<span class="enlighter-text"> TeacherComponent <span class="enlighter-k1">implements<span class="enlighter-text"> OnInit <span class="enlighter-g1">{</span></span></span></span></span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-m0">constructor<span class="enlighter-g1">()<span class="enlighter-text"> <span class="enlighter-g1">{<span class="enlighter-text"> <span class="enlighter-g1">}</span></span></span></span></span></span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-m0">ngOnInit<span class="enlighter-g1">()<span class="enlighter-text">: <span class="enlighter-k1">void<span class="enlighter-text"> <span class="enlighter-g1">{</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">}</span></span></div>
</div>
<div>&nbsp;</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-g1">}</span></span></div>
</div>
</div>
</div>
<p>然后在teacher的html中加入下面这段代码即可。</p>
<pre class="wp-block-code"><code>&lt;app-student&gt;&lt;/app-student&gt;</code></pre>
<p>注意：这个的名字是student.component.ts中selector的名字</p>
<pre class="wp-block-code"><code>@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css']
})</code></pre>
<p>效果：</p>
<img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/2022042902.png">
<h5>2.带module的组件引用component</h5>
<p>创建city</p>
<pre class="wp-block-code"><code>ng g m city --routing</code></pre>
<p>在city目录下创建shandong和beijing两个组件：</p>
<pre class="wp-block-code"><code>ng g c beijing
ng g c shandong</code></pre>
<img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/2022042808.png">
<p>我们在student组件中写一些内容，然后尝试在city/shandong这个组件调用。</p>
<p>带module的组件不能通过上面的方法直接引用。需要通过module这一层引用。</p>
<p>我们找到city这个module。加入student的代码：</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> NgModule <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'@angular/core'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> CommonModule <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'@angular/common'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> CityRoutingModule <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'./city-routing.module'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> ShandongComponent <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'./shandong/shandong.component'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> BeijingComponent <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'./beijing/beijing.component'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text">StudentComponent<span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'../student/student.component'<span class="enlighter-c0">;// 这个地方引入，</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">@<span class="enlighter-m0">NgModule<span class="enlighter-g1">({</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> declarations: <span class="enlighter-g1">[<span class="enlighter-text">ShandongComponent, BeijingComponent,StudentComponent<span class="enlighter-g1">]<span class="enlighter-text">,<span class="enlighter-c0"> //这个地方加入声明</span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> imports: <span class="enlighter-g1">[</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> CommonModule,</span></div>
</div>
<div>
<div><span class="enlighter-text"> CityRoutingModule</span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">]</span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-g1">})</span></span></div>
</div>
<div>
<div><span class="enlighter-text">export <span class="enlighter-k1">class<span class="enlighter-text"> CityModule <span class="enlighter-g1">{<span class="enlighter-text"> <span class="enlighter-g1">}</span></span></span></span></span></span></div>
</div>
</div>
</div>
<p>可以看到，我们在这个地方加入了StudentComponent。然后在shandong组件的html中引用即可。</p>
<pre class="wp-block-code"><code>&lt;app-student&gt;&lt;/app-student&gt;</code></pre>
<p>当然，如果你看了我前面的文章，你大概率会遇到下面的报错。</p>
<pre class="wp-block-code"><code>The Component 'StudentComponent' is declared by more than one NgModule.(-996007)
</code></pre>
<p>这个报错的意思的一个组件，只能被一个NgModule修饰，我们肯定是在其他地方的NgModule中加入了StudentComponent，所以才会报这个错，查看我们前面的文章，发现我们在app.module.ts中确实是加入了StudentComponent，所以才会报这个错，解决办法掉这个就行。</p>
<p>实际上，并不推荐上面的写法。</p>
<p>更推荐带module的写法。</p>
<h5>3.带module的组件引用带module的组件</h5>
<p>我们创建一个module。</p>
<pre class="wp-block-code"><code>ng g m car
//或者带路由也行
ng g m car --routing</code></pre>
<p>然后在car这个module下创建一个子组件</p>
<pre class="wp-block-code"><code>ng g c bmw</code></pre>
<p>我们在city的module中引入car的module</p>
<img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/2022042903.png">
<p>同时，需要在car这个module中导出bmw组件。</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-dracula enlighter-hover enlighter-linenumbers ">
<div class="enlighter">
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> NgModule <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'@angular/core'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> CommonModule <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'@angular/common'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">import <span class="enlighter-g1">{<span class="enlighter-text"> BmwComponent <span class="enlighter-g1">}<span class="enlighter-text"> from <span class="enlighter-s0">'./bmw/bmw.component'<span class="enlighter-text">;</span></span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text">@<span class="enlighter-m0">NgModule<span class="enlighter-g1">({</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> declarations: <span class="enlighter-g1">[<span class="enlighter-text">BmwComponent<span class="enlighter-g1">]<span class="enlighter-text">,</span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> imports: <span class="enlighter-g1">[</span></span></div>
</div>
<div>
<div><span class="enlighter-text"> CommonModule</span></div>
</div>
<div>
<div><span class="enlighter-text"> <span class="enlighter-g1">]<span class="enlighter-text">,</span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"> exports:<span class="enlighter-g1">[<span class="enlighter-text">BmwComponent<span class="enlighter-g1">]<span class="enlighter-text"> <span class="enlighter-c0"> //导出BmwComponent,方便调用</span></span></span></span></span></span></div>
</div>
<div>
<div><span class="enlighter-text"><span class="enlighter-g1">})</span></span></div>
</div>
<div>
<div><span class="enlighter-text">export <span class="enlighter-k1">class<span class="enlighter-text"> CarModule <span class="enlighter-g1">{<span class="enlighter-text"> <span class="enlighter-g1">}</span></span></span></span></span></span></div>
</div>
</div>
</div>
<p>最后，在shandong这个组件中，就可以用bmw这组件了。</p>
<img src="http://kongkui.oss-cn-qingdao.aliyuncs.com/images/2022042904.png">
<p>这种方法更推荐，后期可以通过hidden属性决定加载和现实哪些组件。做到动态加载组件的效果。</p>
<p>注意：实际开发中，发现如果你的开发习惯不好（比如我，很多子组件都叫list），然后引入的时候就悲剧了。</p>
<div>&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/longkui-site/p/16657783.html

查看完整版本: angular如何引用其他组件