Question

我正在向Angular 2移植一个knockoutjs应用程序。我有一个Angular 2组件，在这个阶段纯粹是一个html模板（Web应用程序的登陆页面）。

然而，网站上没有显示任何html。我知道网站的角度2部分正在工作，因为我确实有一个页面上写着“我的第一个有角度的2应用程序”，之后我将其更改为显示着陆页。

app.component.ts：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<landing-page></landing-page>'
})
export class AppComponent { }

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

landingpage.component.ts：

import { Component } from '@angular/core';
@Component({
  selector: 'landing-page',
  templateUrl: 'app/scripts/landingpage.component.html',
})
export class LandingPage { }

landingpage.component.html：

<div id="landing-page" style="background-color: #696969;overflow-y:auto;" class="full-size special">
<div id="google-attribute"></div>
    <div style="height:100%;padding: 40px 40px 40px 40px; min-height:600px;">
        <div class="row sm" style="height:20%;">
            <div class="col-xs-3" style="height:100%;">
                <img class="small-monster" width="100"  src="assets/images/home_page/monster2.png"/>
            </div>
            <div class="col-xs-6"></div>
            <div class="col-xs-3 small-monster" style="height:100%;">
                <img class="small-monster" style="float:right;" width="100"  src="assets/images/home_page/monster4.png"/>
            </div>
        </div>
        <div class="row main-row">
            <div class="col-sm-3 bm" style="height:100%;">
              <div class="vertical-center">
                <img width="250"  src="assets/images/home_page/monster2.png"/>
              </div>
            </div>
            <div class="col-sm-12 col-md-6" style="height:100%;" >
                <div id="motto-text" class="vertical-center">
                    <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
                    <h1 id="main-text"
                        class="text-center white-text display-3">
                        FIND VEGAN STUFF* NEAR YOU.
                    </h1>
                    <a  id="try-now-button"
                        class="with-border clickable"
                        href="#search-filter-page" >
                        <h5 class="text-center medium-text">TRY NOW</h5>
                    </a>
                </div>
            </div>
            <div class="col-sm-3 bm" style="height:100%;">
              <div class="vertical-center">
                <img width="250"  src="assets/images/home_page/monster4.png"/>
              </div>
            </div>
            <div class="row br">
                    <div class="col-xs-12" style="display:table;height:100%;">
                      <h4 style="color:#FFF; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
                  </div>
            </div>
        </div>
    </div>
</div>

什么是缺少的链接，这是阻止我的HTML显示？

Answer 1

<强> landingpage.component.ts

@Component({
  selector: 'my-app',
  template: '<landing-page></landing-page>',
  directives: []
})
export class LangingPage { } <== it should be not AppComponent

然后您必须在 app.component.ts ：

中导入它

import { LangingPage } from './landingpage.component'

不要忘记将其添加到组件的directives元数据中：

@Component({
  selector: 'my-app',
  template: '<landing-page></landing-page>',
  directives: [LangingPage ] <== this line
})
export class AppComponent { }

Angular 2 Component templateUrl未显示

1 个答案: