angulartics angulartics2On指令不使用angular2.0中的loadChildren路由

时间:2016-09-28 10:45:13

标签: angular angular2-routing

我正在使用angular2.0作为我的应用程序

我使用npm install angulartics2 --save安装了angulartics2并将其导入app模块。每件事都很好。后来,我使用延迟加载一个模块,现在angulartic2On无效。以下是我的代码。

// app.module.ts

import { Angulartics2 } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/src/providers/angulartics2-google-analytics';
import { BrowserModule } from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
HttpModule,
RouterModule,

Angulartics2Module.forRoot(),
AppRouteRoot
],
providers: [
Angulartics2GoogleAnalytics 
],
bootstrap: [AppComponent]
})

// app.component.ts

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

import { Angulartics2 } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/src/providers/angulartics2-google-analytics';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(angulartics2: Angulartics2, angulartics2GoogleAnalytics:    Angulartics2GoogleAnalytics) {}
}

// app.routes.ts

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

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

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

export const AppRoutes: Routes = [
{ path: '', component: AppComponent},
{ path: 'about', loadChildren : 'app/about/about.module' },
];

export const AppRouteRoot:ModuleWithProviders = RouterModule.forRoot(AppRoutes, { useHash: true });

// app.component.html

<h1>
  {{title}}
</h1>
<button angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="APP">button inside app component</button>
<router-outlet></router-outlet>

// about.module.ts

import { NgModule }       from '@angular/core';
import { CommonModule } from '@angular/common';

import { FormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

// import { Angulartics2Module } from 'angulartics2';
// import { Angulartics2GoogleAnalytics } from 'angulartics2/src/providers/angulartics2-google-analytics';
// import { Angulartics2On } from 'angulartics2/src/core/angulartics2On';

import {AboutComponent} from './about.component';

import {AboutRouting} from './about.routes'

@NgModule({
    declarations: [

     AboutComponent
    //  ,
    //   Angulartics2On


    ],
    providers: [
        // Angulartics2GoogleAnalytics

    ],
    imports: [
        CommonModule,    

        RouterModule,
        FormsModule,
        HttpModule,

        AboutRouting,
        // Angulartics2Module.forRoot(),
        // Angulartics2On

    ]
})
export default class AboutModule { }

// about.component.ts

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
    })
export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

 }

// about.routes.ts

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

import {   AboutComponent } from './about.component';

export const AboutRoutes: Routes = [{
    path: '',
    component: AboutComponent
}];

export const AboutRouting:ModuleWithProviders = RouterModule.forChild(AboutRoutes); 

// about.component.html

<p>
  about works!
</p>
<button type="button" (click)="fnTrack()" angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="ABOUT">About   Click</button>

//的package.json

...

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angulartics2": "^1.1.9",
    "core-js": "^2.4.1",
    "process-nextick-args": "^1.0.7",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
   "zone.js": "^0.6.23"
  }

...

有没有办法在延迟路由中启用angulartics2

提前致谢

0 个答案:

没有答案