从服务器

Question

我已经在angular-cli中启动了一个项目，并希望从Sitecore服务器中提取远程html模板（此模板中的标记需要包含Angular指令）。通过各种SO帖子，我提出了以下方法。

我看起来像这样的文件：

app.module.js

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { PrivacyComponent } from './pages/privacy/privacy.component';

import { routes } from './app.router';

import { SanitizeHtmlPipe } from './pipes/sanitise-html.pipe';

import { TemplateConfigService } from './services/template-config.service';
import { TemplateResolve } from './services/template-resolve';

import { InViewportModule } from 'ng-in-viewport';
// Remember to import `intersection-observer` polyfill to support all major browsers
import 'intersection-observer';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,    
    AboutComponent,
    TermsComponent,
    SanitizeHtmlPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    InViewportModule.forRoot()
  ],
  providers: [TemplateConfigService,TemplateResolve],
  bootstrap: [AppComponent]
})

export class AppModule { }

about.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  template: '<main [innerHtml]="myTemplate | sanitizeHtml"></main>'
})
export class AboutComponent implements OnInit {

public myTemplate: any = "";
constructor(private route: ActivatedRoute) { }
ngOnInit() {
   this.myTemplate = this.route.snapshot.data['tempURL'];
}

}

app.router.js

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { TermsComponent } from './pages/terms/terms.component';

import { TemplateResolve } from './services/template-resolve';

export const router: Routes = [
  { path: '', component: HomeComponent, resolve: {tempURL: TemplateResolve}},
  { path: 'about', component: AboutComponent, resolve: {tempURL: TemplateResolve} },
  { path: 'privacy', component: PrivacyComponent, resolve: {tempURL: TemplateResolve} },
  { path: 'terms', component: TermsComponent, resolve: {tempURL: TemplateResolve} },
  { path: '404', component: NotFoundComponent, resolve: {tempURL: TemplateResolve} },  
  { path: '**', redirectTo: '/404' }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

模板config.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class TemplateConfigService {

  constructor(private http: Http) { }

  getLocation(where:any) {

     let env = false
     let devString = 'http://localhost:3000/' + where; 
     let prodString =  '/' + where + '?ajax=true';
     let finalString = (env) ? prodString : devString;

     return this.http.get (finalString)
        .map ( response => { 
          return response [ '_body' ] 
        });

  }

}

模板resolve.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { TemplateConfigService } from './template-config.service';

@Injectable()
export class TemplateResolve implements Resolve<any> {
  constructor(public tcs: TemplateConfigService) {}
  resolve(route: ActivatedRouteSnapshot) {
    return this.tcs.getLocation(route.url[0].path);
  }
}

所以基本上我在显示页面之前使用路由器解析模板标记，该页面通过http.get调用检索并插入页面中的相关位置。这两项服务促进了这一点。在这个例子中使用一个简单的快速服务器，上面的代码获取模板并正确显示标记，但代码中的Angular指令不起作用。标记本身相当简单，在下面的片段中，* ngIf和（click）和routerLink不会起作用。

<a class="main-nav__link" routerLink="work" routerLinkActive="is-active" (click)="closeMenu()">Work</a>

<article class="card-blog card-blog--pink" *ngIf="filterBy!=='opinions'">

到目前为止我看到的所有答案似乎都表明这是不可能的，因为模板需要在编译之前在本地呈现？是否真的没有办法让这项工作成为可能，会欣赏任何人可能对此有任何黑客或想法。