将 html 转换为 angular 8 个分量

Question

我是 angular 的新手。我正在将 HTML 模板转换为 angular 8 组件。当我将完整的 HTML 放在 Index 页面和外部 <app-root></app-root> 时，一切正常。但是当我把它放在索引页的 <app-root></app-root> 里面时，在这种情况下颜色会出现但文字不会出现。在检查时，我可以看到那里有文字。

我正在分享 AppComponent 和 Index 文件代码。如果您需要任何其他东西，我会提供给您。请指导我哪里做错了。我想从 HTML 模板创建单独的页眉、内容、页脚组件在 angular

******** AppComonent.html *************

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container-fluid px-md-4 ">
      <a class="navbar-brand" href="index.html">Skillhunt</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="oi oi-menu"></span> Menu
      </button>

      <div class="collapse navbar-collapse" id="ftco-nav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a  routerLink="/index" class="nav-link">Home</a></li>
          <li class="nav-item"><a  routerLink="/jobs" class="nav-link">Browse Jobs</a></li>
          <li class="nav-item"><a routerLink="/candidates" class="nav-link">Canditates</a></li>
          <li class="nav-item"><a routerLink="/blog" class="nav-link">Blog</a></li>
          <li class="nav-item"><a routerLink="/contact" class="nav-link">Contact</a></li>
          <li class="nav-item cta mr-md-1"><a routerLink="/postjobs" class="nav-link">Post a Job</a></li>
          <li class="nav-item cta cta-colored"><a routerLink="/login" class="nav-link">Login/Sign Up</a></li>

        </ul>
      </div>
    </div>
  </nav>
<!-- END nav -->

<div class="hero-wrap img" style="background-image: url(assets/images/bg_1.jpg);">
    <div class="overlay"></div>
    <div class="container">
        <div class="row d-md-flex no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-10 d-flex align-items-center ftco-animate">
              <div class="text text-center pt-5 mt-md-5">
                  <p class="mb-4">Find Job, Employment, and Career Opportunities</p>
              <h1 class="mb-5">The Eassiest Way to Get Your New Job</h1>
                          <div class="ftco-counter ftco-no-pt ftco-no-pb">
                      <div class="row">
                        <div class="col-md-4 d-flex justify-content-center counter-wrap ftco-animate">
                          <div class="block-18">
                            <div class="text d-flex">
                                <div class="icon mr-2">
                                    <span class="flaticon-worldwide"></span>
                                </div>
                                <div class="desc text-left">
                                  <strong class="number" data-number="46">0</strong>
                                  <span>Countries</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 d-flex justify-content-center counter-wrap ftco-animate">
                          <div class="block-18 text-center">
                            <div class="text d-flex">
                                <div class="icon mr-2">
                                    <span class="flaticon-visitor"></span>
                                </div>
                                <div class="desc text-left">
                                  <strong class="number" data-number="450">0</strong>
                                  <span>Companies</span>
                                </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 d-flex justify-content-center counter-wrap ftco-animate">
                          <div class="block-18 text-center">
                            <div class="text d-flex">
                                <div class="icon mr-2">
                                    <span class="flaticon-resume"></span>
                                </div>
                                <div class="desc text-left">
                                  <strong class="number" data-number="80000">0</strong>
                                  <span>Active Employees</span>
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
                          <div class="ftco-search my-md-5">
                              <div class="row">
                      <div class="col-md-12 nav-link-wrap">
                          <div class="nav nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active mr-md-1" id="v-pills-1-tab" data-toggle="pill" href="#v-pills-1" role="tab" aria-controls="v-pills-1" aria-selected="true">Find a Job</a>

                            <a class="nav-link" id="v-pills-2-tab" data-toggle="pill" href="#v-pills-2" role="tab" aria-controls="v-pills-2" aria-selected="false">Find a Candidate</a>

                          </div>
                        </div>
                        <div class="col-md-12 tab-wrap">

                          <div class="tab-content p-4" id="v-pills-tabContent">

                            <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab">
                                <form action="#" class="search-job">
                                    <div class="row no-gutters">
                                        <div class="col-md mr-md-2">
                                            <div class="form-group">
                                                <div class="form-field">
                                                    <div class="icon"><span class="icon-briefcase"></span></div>
                                                  <input type="text" class="form-control" placeholder="eg. Garphic. Web Developer">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md mr-md-2">
                                            <div class="form-group">
                                                <div class="form-field">
                                                    <div class="select-wrap">
                                                <div class="icon"><span class="ion-ios-arrow-down"></span></div>
                                                <select name="" id="" class="form-control">
                                                    <option value="">Category</option>
                                                    <option value="">Full Time</option>
                                                  <option value="">Part Time</option>
                                                  <option value="">Freelance</option>
                                                  <option value="">Internship</option>
                                                  <option value="">Temporary</option>
                                                </select>
                                              </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md mr-md-2">
                                            <div class="form-group">
                                                <div class="form-field">
                                                    <div class="icon"><span class="icon-map-marker"></span></div>
                                                  <input type="text" class="form-control" placeholder="Location">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md">
                                            <div class="form-group">
                                                <div class="form-field">
                                                  <button type="submit" class="form-control btn btn-primary">Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-performance-tab">
                                <form action="#" class="search-job">
                                    <div class="row">
                                        <div class="col-md">
                                            <div class="form-group">
                                                <div class="form-field">
                                                    <div class="icon"><span class="icon-user"></span></div>
                                                  <input type="text" class="form-control" placeholder="eg. Adam Scott">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md">
                                            <div class="form-group">
                                                <div class="form-field">
                                                    <div class="select-wrap">
                                                <div class="icon"><span class="ion-ios-arrow-down"></span></div>
                                                <select name="" id="" class="form-control">
                                                    <option value="">Category</option>
                                                    <option value="">Full Time</option>
                                                  <option value="">Part Time</option>
                                                  <option value="">Freelance</option>
                                                  <option value="">Internship</option>
                                                  <option value="">Temporary</option>
                                                </select>
                                              </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md">
                                            <div class="form-group">
                                                <div class="form-field">
                                                    <div class="icon"><span class="icon-map-marker"></span></div>
                                                  <input type="text" class="form-control" placeholder="Location">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md">
                                            <div class="form-group">
                                                <div class="form-field">
                                                  <button type="submit" class="form-control btn btn-primary">Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
            </div>
          </div>
          </div>
    </div>
  </div>

  <section class="ftco-section ftco-no-pt ftco-no-pb">
      <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <div class="category-wrap">
                      <div class="row no-gutters">
                          <div class="col-md-2">
                              <div class="top-category text-center no-border-left">
                                  <h3><a href="#">Website &amp; Software</a></h3>
                                  <span class="icon flaticon-contact"></span>
                                  <p><span class="number">143</span> <span>Open position</span></p>
                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="top-category text-center active">
                                  <h3><a href="#">Education &amp; Training</a></h3>
                                  <span class="icon flaticon-mortarboard"></span>
                                  <p><span class="number">143</span> <span>Open position</span></p>
                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="top-category text-center">
                                  <h3><a href="#">Graphic &amp; UI/UX Design</a></h3>
                                  <span class="icon flaticon-idea"></span>
                                  <p><span class="number">143</span> <span>Open position</span></p>
                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="top-category text-center">
                                  <h3><a href="#">Accounting &amp; Finance</a></h3>
                                  <span class="icon flaticon-accounting"></span>
                                  <p><span class="number">143</span> <span>Open position</span></p>
                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="top-category text-center">
                                  <h3><a href="#">Restaurant &amp; Food</a></h3>
                                  <span class="icon flaticon-dish"></span>
                                  <p><span class="number">143</span> <span>Open position</span></p>
                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="top-category text-center">
                                  <h3><a href="#">Health &amp; Hospital</a></h3>
                                  <span class="icon flaticon-stethoscope"></span>
                                  <p><span class="number">143</span> <span>Open position</span></p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>

  <section class="ftco-section">
      <div class="container">
          <div class="row justify-content-center mb-5">
        <div class="col-md-7 heading-section text-center ftco-animate">
            <span class="subheading">Job Categories</span>
          <h2 class="mb-0">Top Categories</h2>
        </div>
      </div>
      <div class="row">
          <div class="col-md-3 ftco-animate">
              <ul class="category text-center">
                  <li><a href="#">Web Development <br><span class="number">354</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Graphic Designer <br><span class="number">143</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Multimedia <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Advertising <br><span class="number">90</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
              </ul>
          </div>
          <div class="col-md-3 ftco-animate">
              <ul class="category text-center">
                  <li><a href="#">Education &amp; Training <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">English <br><span class="number">200</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Social Media <br><span class="number">300</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Writing <br><span class="number">150</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
              </ul>
          </div>
          <div class="col-md-3 ftco-animate">
              <ul class="category text-center">
                  <li><a href="#">PHP Programming <br><span class="number">400</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Project Management <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Finance Management <br><span class="number">222</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Office &amp; Admin <br><span class="number">123</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
              </ul>
          </div>
          <div class="col-md-3 ftco-animate">
              <ul class="category text-center">
                  <li><a href="#">Web Designer <br><span class="number">324</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Customer Service <br><span class="number">564</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Marketing &amp; Sales <br><span class="number">234</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
                  <li><a href="#">Software Development <br><span class="number">425</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
              </ul>
          </div>
      </div>
      </div>
  </section>

  <section class="ftco-section services-section">
    <div class="container">
      <div class="row d-flex">
        <div class="col-md-3 d-flex align-self-stretch ftco-animate">
          <div class="media block-6 services d-block">
            <div class="icon"><span class="flaticon-resume"></span></div>
            <div class="media-body">
              <h3 class="heading mb-3">Search Millions of Jobs</h3>
              <p>A small river named Duden flows by their place and supplies.</p>
            </div>
          </div>      
        </div>
        <div class="col-md-3 d-flex align-self-stretch ftco-animate">
          <div class="media block-6 services d-block">
            <div class="icon"><span class="flaticon-team"></span></div>
            <div class="media-body">
              <h3 class="heading mb-3">Easy To Manage Jobs</h3>
              <p>A small river named Duden flows by their place and supplies.</p>
            </div>
          </div>    
        </div>
        <div class="col-md-3 d-flex align-self-stretch ftco-animate">
          <div class="media block-6 services d-block">
            <div class="icon"><span class="flaticon-career"></span></div>
            <div class="media-body">
              <h3 class="heading mb-3">Top Careers</h3>
              <p>A small river named Duden flows by their place and supplies.</p>
            </div>
          </div>      
        </div>
        <div class="col-md-3 d-flex align-self-stretch ftco-animate">
          <div class="media block-6 services d-block">
            <div class="icon"><span class="flaticon-employees"></span></div>
            <div class="media-body">
              <h3 class="heading mb-3">Search Expert Candidates</h3>
              <p>A small river named Duden flows by their place and supplies.</p>
            </div>
          </div>      
        </div>
      </div>
    </div>
  </section>

******* 索引页 HTML **************

<!doctype html>
<html lang="en">
  <head>
    <title>Skillhunt - Free Bootstrap 4 Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="assets/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">

    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">

    <link rel="stylesheet" href="assets/css/aos.css">

    <link rel="stylesheet" href="assets/css/ionicons.min.css">

    <link rel="stylesheet" href="assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="assets/css/jquery.timepicker.css">


    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/icomoon.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <base href="/">
  </head>
<body>    
    <app-root></app-root>
</body>
</html>

Answer 1

Angular 是全功能的 SPA 框架，在它的帮助下创建单页应用程序。在SPA中整个页面不是每次都重新加载，每次视图都会改变

因此，当您第一次加载应用程序时，并非所有来自服务器的页面都会被渲染。当您加载 application.Since 时，只有 index.html 加载了单个页面它被称为 SPA

您必须创建三个不同的组件，并在每个 component.html 上添加您的 html:

1.header-分量

2.content-cmponent

3.footer-组件

您可以使用此命令创建每个组件

ng g c header

构建组件时，转到 app-component.html 并像这样添加这些组件

 <app-header></app-header>
 <app-content></app-content>
 <app-footer></app-footer>

看这个working example

如果您使用路由，则必须这样做：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

您的内容应该是您从路由重定向的组件！

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent } from './content/content.component';



 const routes: Routes = [
   {
    path: '',
    component: ContentComponent 
   }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Updated example with routing

将 html 转换为 angular 8 个分量

Converting html to angular 8 component

angular

angular7