Laravel Route + Angular 5

Question

我正在使用Laravel和Angular构建一个复杂的混合应用程序，我正在尝试通过Laravel路由引导Angular 5应用程序。我真的不想使用Angular的路线，因为我希望为单独的角度模块创建一个单独的刀片。

让我们假设，以下是场景。我有两个功能：

1. 接收客户反馈
2. 推荐你的朋友

我将为这两个功能创建一个单独的角度模块和“刀片视图”：

• FeedbackComponent与FeedbackComponent（app-feedback作为选择器）
• ReferFriendModule（app-refer as selector）

现在，我遵循以下要求：

• 我希望在不同的刀片上加载“app-feedback”和“app-refer”（两个独立的bootstraps）
• 我不希望我的JS充满不必要的代码，例如反馈页面不应该有Referral的页面JS代码（我知道我们可以在Angular中使用Lazy Loading但它需要angular的“loadChildren”功能。（如果有办法避免它（动态组件加载器除外）让我知道。

目前，为了做到这一点，我需要编译我的整个代码两次。所以，我可以为引用和反馈模块提供单独的JS。有没有更简单的方法来实现这一目标？

Answer 1

我设法用ngOnBootstrap函数做到这一点。这是我做的：

在Laravel中，我在web.php中创建了一条路线：

Route::get('/service-feedback/{code}', 'ServiceFeedbackController@show');
Route::get('/refer-a-friend/{client}', 'ReferController@show');

在Controller的show方法中，我为单独的页面返回了一个单独的视图：

return view('pages.service-feedback')->with($mydata);
return view('pages.refer')->with($mydata);

在内部视图中我写了以下代码：

推荐：

@extends('layouts.eng-page')
@section('content')
    <section id="app-refer-advocate" class="main"></section>
@endsection

反馈：

@extends('layouts.eng-page')
@section('content')
    <section id="app-feedback" class="main"></section>
@endsection

注意section元素的“id”属性。这必须与组件的选择器匹配。

在Angular的AppModule中，我写了以下内容：

import { ReferModule } from './../../app/modules/refer/refer.module';
import { GlobalsModule } from './../../app/modules/globals/globals.module';
import { FeedbackFormComponent } from './../../app/modules/feedback/components/feedback-form/feedback-form.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FeedbackModule } from '../../app/modules/feedback/feedback.module';
import { Globals } from '../../app/modules/globals/services/globals.service';
import { ApplicationRef } from '@angular/core';
import { ReferAdvocateComponent } from './../../app/modules/refer/components/refer-advocate/refer-advocate.component';

@NgModule({
  imports: [
    BrowserModule,
    FeedbackModule,
    ReferModule,
    GlobalsModule.forBrowser()
  ],
  entryComponents: [FeedbackFormComponent, ReferAdvocateComponent]
})
export class AppModule {

  constructor(private global: Globals) { }

  /**
   * Bootstraps Application based on laravel blade
   * @param app
   * @author Sahil Purav
   */
  ngDoBootstrap(app: ApplicationRef) {
    const components: Object = {
      'app-feedback': FeedbackFormComponent,
      'app-refer-advocate': ReferAdvocateComponent,
    };
    const selector = this.global.nativeDocument.getElementsByClassName('main')[0].id;
    const element = this.global.nativeDocument.createElement(selector);
    this.global.nativeDocument.getElementsByClassName('main')[0].appendChild(element);
    const component = components[selector];
    app.bootstrap(component);
  }
}

上面的代码将基于主要部分元素的“id”引导应用程序。希望它会帮助别人！