Question

我有一个product-list.component.ts：

import { Component } from '@angular/core'

@Component({
    selector: 'pm-products',
    templateUrl: 'app/products/product-list.component.html'
})

export class ProductListComponent {

}

app.component.ts：

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

 import { Component } from '@angular/core';

import { ProductListComponent } from './products/product-list.component';

@NgModule({
       bootstrap:    [ ],
       imports: [ ProductListComponent],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
       declarations: [AppComponent,ProductListComponent ],

})

@Component({
selector: 'pm-app',
template: `
    <div>
        <h1>{{pageTitle}}</h1>
        <pm-products></pm-products>
    </div>
`
})

   export class AppComponent { 
pageTitle: string = 'Acme Product Management';
}

我在index.html中使用了pm-app但是product-list.component.html没有出现在屏幕上。

提前感谢！

Answer 1

您的templateUrl应该是：

templateUrl: './app/products/product-list.component.html'

Answer 2

更改您的import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ProductListComponent } from './products/product-list.component'; @Component({ selector: 'pm-app', template: ` <div> <h1>{{pageTitle}}</h1> <pm-products></pm-products> </div> ` }) export class AppComponent { pageTitle: string = 'Acme Product Management'; } @NgModule({ bootstrap: [AppComponent ], imports: [ BrowserModule ], declarations: [AppComponent,ProductListComponent ] }) export class AppModule {}，如下所示：

<xsl:template name="Gallery-View">
    <div class="gallery-images">
      <!--<ul class="hoverbox">-->
      <xsl:for-each select="//Gallery/Images[@folderpath = 'thumb/']">
        <xsl:variable name="path" select="@filename"/>
        <xsl:variable name="title" select="@title"/>
        <!-- Trigger the Modal -->
        <img id="myImg" src="Images/Gallery/thumb/{$path}" alt="{$title}"/>

        <!-- The Modal -->
        <div id="myModal" class="modal">

          <!-- The Close Button -->
          <span class="close" onclick="document.getElementById('myModal').style.display='none'"><i class="pe-7s-close"></i></span>

          <!-- Modal Content (The Image) -->
          <img class="modal-content" src="Images/Gallery/full/{$path}" alt="{$title}" id="img01"/>

          <!-- Modal Caption (Image Text) -->
          <div id="caption">
            <xsl:value-of select="$title"/>
          </div>
        </div>

        <script>
<!--// Get the modal-->
var modal = document.getElementById('myModal');

<!--// Get the image and insert it inside the modal - use its "alt" text as a caption-->
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";

    captionText.innerHTML = this.alt;
}

<!-- Get the <span> element that closes the modal-->
var span = document.getElementsByClassName("close")[0];

<!--// When the user clicks on <span> (x), close the modal-->
span.onclick = function() {
    modal.style.display = "none";
}
</script>
      </xsl:for-each>
    </div>
  </xsl:template>

templateUrl无法在角度2中工作

2 个答案: