简体   繁体   中英

Angular2 Html Templates

Is there a way to call a component selector from another html template. For instance:

@Component({
    selector: 'reports',
    templateUrl: 'reports.html'
})

Can I call that selector "reports" from within another templateUrl? I'm trying to split out my html into separate files in order to make it more manageable. I know how to set it up like <reports></reports> in the html. I'm not sure how I would set this up or call it per say from within the modules.

When you specify a selector, you are basically defining a custom HTML element. So you can use it in any other template in the application as you've shown: <reports></reports> .

Angular modules provide the "template resolution environment". So you need to ensure that the component containing the "reports" selector is declared in the same component as any template that uses it, or is "pulled in" by way of an Angular module import.

I have an example here: https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final Check out the star.component.ts.

选择器:“ [报告]”

  selector: "[reports]" 

I think your split your html page sub pages, it's very easy.

<body>
   <div clss="ui container">
      <reports></reports>  //the reports page view render hear,just add 
                             this component class in NgModules, it will works
   </div>

  <div clss="ui container">
      <reports-list></reports-list> //you can add another file also same
  </div>
</body>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM