Angular新建组件以及组件之间的调用
<h1>场景</h1><p>Angular介绍、安装Angular Cli、创建Angular项目入门教程：</p>
<p>https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017</p>
<p>在上面搭建好Angular项目。项目目录结构如下</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223250911-1968651447.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>注：</p>
<p>博客： <br>https://blog.csdn.net/badao_liumang_qizhi
<br>关注公众号 <br>霸道的程序猿 <br>获取编程相关电子书、教程推送与免费下载。</p>
<h1>实现</h1>
<p>然后使用命令行来到项目目录下或者直接使用VSCode下的终端</p>
<p>新建组件的命令</p>
<div class="cnblogs_code">
<pre>ng g component 模块名</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223258371-1793933181.jpg" alt=""></p>
<p> </p>
<p> </p>
<p>如果直接使用ng g component 组件名的话会默认在app下新建一个模块。</p>
<p>为了规范开发，可以直接在模块名前面加上路径，比如</p>
<div class="cnblogs_code">
<pre>ng g component components/news</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223321074-1749253328.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>这样就会在app下新建一个components目录并在此目录下新建一个news目录</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223327130-1207657822.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>此时可以看到news下一个完整的组件所需的文件都已经建立完成，而且在app.module.ts也已经引入当前组件。</p>
<p><img alt=""></p>
<p> <img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223330933-160867906.jpg" alt=""></p>
<p> </p>
<p> </p>
<h2>引用组件</h2>
<p>加入我们要在根组件中引用上面新建的新闻组件，首先来到新闻组件的news.components.ts中，找到其selector所对应的使用此组件时的名字。</p>
<p>如果没有更改默认名字如下</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223334872-2125946921.jpg" alt=""></p>
<p> </p>
<p> </p>
<p>然后来到app.component.html中将此页面清空，然后添加上面新闻组件名字对应的标签。</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223339595-290331052.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>为了看到效果，修改新闻组件下的news.components.html</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223345522-1828826286.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>然后运行项目查看效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223349512-1492579462.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>同理如果想在新闻组件中调用其他组件，首先新建一个头组件header,然后修改头组件的内容</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223355513-386410416.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>然后在新闻组件中引入头组件</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223359332-953131225.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>运行后效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200422223403501-1459784296.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
</div>
<div id="MySignature" role="contentinfo">
博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。<br><br>
来源：https://www.cnblogs.com/badaoliumangqizhi/p/12757419.html
頁:
[1]