使用角度组件将引导模板集成到角度项目中答案

【问题标题】：Integrating a bootstrap template into an angular project using angular components使用角度组件将引导模板集成到角度项目中
【发布时间】：2019-09-21 17:34:24
【问题描述】：

由于我不是前端开发人员并且我正在从头开始构建 Web 应用程序，因此我下载了一个引导模板并尝试将其集成到一个简单的 Angular 项目中（由 Angular CLI 生成）。
我所做的是：
复制app.component.html中模板的index.html文件：

app.component.html

<!DOCTYPE HTML>
<!--
    Parallelism by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Parallelism by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body class="is-preload">

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Main -->
                    <section id="main">

                        <!-- Items -->
                            <div class="items">

                                <div class="item intro span-2">
                                    <h1>Parallelism</h1>
                                    <p>A responsive portfolio site<br />
                                    template by HTML5 UP</p>
                                </div>

                                <article class="item thumb span-1">
                                    <h2>You really got me</h2>
                                    <a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Ad Infinitum</h2>
                                    <a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Different.</h2>
                                    <a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Elysium</h2>
                                    <a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-3">
                                    <h2>Kingdom of the Wind</h2>
                                    <a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>The Pursuit</h2>
                                    <a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Boundless</h2>
                                    <a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>The Spectators</h2>
                                    <a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a>
                                </article>

                            </div>

                        <!-- Items -->
                            <div class="items">

                                <article class="item thumb span-3"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>The Pursuit</h2><a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Boundless</h2><a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>The Spectators</h2><a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>You really got me</h2><a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Ad Infinitum</h2><a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Different.</h2><a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Elysium</h2><a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a></article>

                            </div>

                    </section>

                <!-- Footer -->
                    <section id="footer">
                        <section>
                            <p>This is <strong>Parallelism</strong>, a responsive portfolio site template by <a href="http://html5up.net">HTML5 UP</a>. Free for personal
                            and commercial use under the <a href="http://html5up.net/license">Creative Commons Attribution</a> license.</p>
                        </section>
                        <section>
                            <ul class="icons">
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                            </ul>
                            <ul class="copyright">
                                <li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
                            </ul>
                        </section>
                    </section>

            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.poptrox.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

当然，我已经将模板的资产复制到资产文件夹并修改了文件路径。
这种工作。
所以这是我的问题：

这种集成引导模板的方式会导致错误吗？
我这样做是否正确？
如果不是，你愿意告诉我我做错了什么吗？

【问题讨论】：

app.component.ts文件中css文件的路径是不是改了

标签： angular html css bootstrap-4

【解决方案1】：

对于 Angular 2+，类似问题已回答 here

是的，这是可能的，但您必须进行“一些”调整。

模板

首先通过 npm 导入你所有的 js 脚本插件，如果它们在那里可用的话。

npm install (插件名) --save

OR 您可以在项目中添加这些脚本 js 文件并然后您将不得不编辑您的 angular.json 以包含 js 插件（js & css），例如如下：

更新

"styles": ["styles.css", "assets/css/noscript.css"], "scripts":["assets/js/jquery.min.js","assets/js/jquery.poptrox.min.js","assets/js/browser.min.js","assets/js/breakpoints.min.js","assets/js/util.js","assets/js/main.js"],

将样式和脚本的路径放入数组中

然后你应该将主模板css文件添加到预定义的styles.css中（你可以在style.css中添加你所有的main.css内容，它是在项目创建时自动创建的）

接下来，您应该将页面分解为组件（查看组件和“标记”组件）。

现在关于自定义应用开发：

添加你的自定义 - js 到 .component.js - css 到 .component.css - html 到 .component.html

更新

看看this，我已经使用您的模板创建了一个示例应用程序。您可以进一步编辑它。

【讨论】：

插件是指脚本文件吗？
另外，这一行并不清楚：“那么你应该将主模板 css 文件添加到预定义的 styles.css 中”。你介意再解释一下吗？
并且，如果可以解释视图组件和标签组件之间的区别。那太好了
更新了答案。如果您的模板是单页，您真的不需要创建不必要的组件，您可以在 app.html 中添加内部 html（带有 id Wrapper 的 div）并让它工作。
你的意思是我不应该添加页眉和页脚部分吗？只是内部的html？

【解决方案2】：

具体有两种实现方式，

使用 ng-bootstrap (Ng-Bootstrap)。
创建一个新的 Angular 应用程序。只需在 angular.json 或 index.html 上包含引导资源 js 文件、css 文件和 jquery。然后，您可以从引导网站获取所需的 html 并实施您的解决方案。

如果你被困在任何地方，我可以帮助你:)

嘿，我正在为我的项目使用非常相似的我自己的解决方案。（第二种方式）

回答您的问题，

您不需要复制整个页面。将引导资源导入 index.html 时，可以拆分为组件。例如，您可以有一个 header.componenet 和一个 footer.componenet 和一个 body.componenet，这样更容易维护。
你做的有点不对，因为你没有以角度方式实现它。
已在上面回答。

【讨论】：

沙山您好，感谢您的回答。然而，我真正需要的是在我的 Angular 项目中实现一个现成的模板（它有 index.html 和 assets 文件）。不是自己构建模板。它已经建成。我只想将它正确地集成到我的项目中。
@AhmedGhrib 对不起。但是，为了可维护性，您仍然必须获得现成的模板并将其以组件方式集成到您的应用程序中。这是一种自己构建模板，但没有 html 编码。只有您想要做的是识别组件:)

【解决方案3】：

这是一个角度引导启动代码。它包含3个布局开始。使用最新的 Angular 和引导程序构建。

源码：Ready to use Angular Bootstrap Template

【讨论】：