在角度组件中使用AngularJS指令
我正在尝试升级angularjs指令，以便将其用于我的角度组件。我已经让混合（ng1+ng2）环境开始工作。我还可以在angularjs中注入angularjs服务，并在angularjs组件中使用它们（实际上，即使使用angularjs 1.4.x，我也能做到这一点） 现在我尝试在angularjs中使用现有的angularjs指令，但不起作用 以下是我的一些代码片段，仅供参考 [index.html]（我的应用程序是Angular 4根组件） [app.module.ts]（角度4模块） [app.component.ts]（角度4分量） [myStars.js]（AngularJs指令） [test.component.html]（Angular 4 html）在角度组件中使用AngularJS指令,angularjs,angular,angularjs-directive,upgrade,hybrid,Angularjs,Angular,Angularjs Directive,Upgrade,Hybrid,我正在尝试升级angularjs指令，以便将其用于我的角度组件。我已经让混合（ng1+ng2）环境开始工作。我还可以在angularjs中注入angularjs服务，并在angularjs组件中使用它们（实际上，即使使用angularjs 1.4.x，我也能做到这一点） 现在我尝试在angularjs中使用现有的angularjs指令，但不起作用 以下是我的一些代码片段，仅供参考 [index.html]（我的应用程序是Angular 4根组件） [app.module.ts]（角度4模块） [
。。。
...
谢谢。对于任何感兴趣的人，以下是此错误的解决方案 [test.module.ts]（角度4测试模块）
从'@angular/core'导入{NgModule}；
从“@angular/common”导入{CommonModule}；
从'@angular/router'导入{RouterModule，Routes}；
从“./test.component”导入{TestComponent}；
//导入新的MyStarsDirective）
从“../../../components/directions/myStars/myStars”导入{MyStarsDirective}；
const thisRoute:路由=[
{
路径：“test/：id”，
组件：TestComponent
}
];
@NGD模块({
声明：[
测试组件，
MyStarsDirective，//您在代码中的何处使用$scope？@brunopeta我在angularjs代码中有$scope，但在升级的组件中没有Where。这很奇怪，因为zone.js抛出的错误表明您在组件的某个地方有它。@brunopeta有人说这可能是我引导这两个框架的方式。@brunopotea顺便说一句，我有$scope在我的其他angularjs指令和控制器中。我还没有尝试迁移或升级它们。这有关系吗？很好！我很高兴能帮助你，Will！为我节省了大量时间，谢谢。我花了几天时间试图找出一个解决方案，直到找到这个答案
...
<body>
<div class="banner">Angular Migration</div>
<my-app>Loading...</my-app>
...
</body>
...
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { Router } from '@angular/router';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['sampleApp']);
platformRef.injector.get(Router).initialNavigation();
});
import { NgModule, Component } from '@angular/core';
import { HashLocationStrategy, LocationStrategy, CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { RouterModule, Routes, UrlHandlingStrategy } from '@angular/router';
import { HybridUrlHandlingStrategy } from './hybridUrlHandlingStrategy';
import { AppComponent } from './app.component';
export const routes: Routes = [
...
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
UpgradeModule,
RouterModule.forRoot([], { useHash: true, initialNavigation: false })
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy },
{ provide: 'appService', useFactory: (i: any) => i.get('appService'), deps: ['$injector'] },
{ provide: 'mdToHtml', useFactory: (i: any) => i.get('mdToHtml'), deps: ['$injector'] }
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {
ngDoBootstrap() { }
}
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div ng-view></div>
`,
})
export class AppComponent { }
'use strict';
angular.module('sampleApp', [
'ngRoute',
'app.components.services.appService'
])
.config(function ($routeProvider) {
$routeProvider
.otherwise({
template: ''
});
});
'use strict';
angular.module('app.components.directives.myStars', [])
.controller('MyStarsCtrl', function() {
console.log("**** in MyStarsCtrl ")
})
.component('myStars', {
restrict: 'E',
bindings: {
count: '=count'
},
template: '<div>***** M Y S T A R S *****</div>'
});
import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
@Directive({
selector: 'my-stars'
})
export class MyStarsDirective extends UpgradeComponent {
@Input() count: number;
@Output() clicked: EventEmitter<number>;
constructor(elementRef: ElementRef, injector: Injector) {
super('myStars', elementRef, injector);
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes} from '@angular/router';
import { TestComponent } from './test.component';
// importing the new MyStarsDirective)
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';
const thisRoute: Routes = [
{
path: 'test/:id',
component: TestComponent
}
];
@NgModule({
declarations: [
TestComponent,
MyStarsDirective, // <<<< adding directive here
],
providers: [],
imports: [
CommonModule,
RouterModule.forChild(thisRoute)
],
exports: [
RouterModule
]
})
export class TestModule {}
import { Component, Inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HybridUrlHandlingStrategy } from '../../../hybridUrlHandlingStrategy';
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';
@Component({
templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
routeParams: any
myService: any
mdToHtml: any
constructor(
@Inject('myService') myService: any,
@Inject('mdToHtml') mdToHtml: (str: string) => string,
private activatedRoute: ActivatedRoute
) {
this.myService = myService;
this.mdToHtml = mdToHtml;
}
ngOnInit() {
this.routeParams = this.activatedRoute.params.subscribe(params => {
console.log("params", params['groupId'])
...
}
ngOnDestroy() {
this.routeParams.unsubscribe();
}
}
...
<my-stars></my-stars> <!-- <<<< using directive here -->
...
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes} from '@angular/router';
import { TestComponent } from './test.component';
// importing the new MyStarsDirective)
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';
const thisRoute: Routes = [
{
path: 'test/:id',
component: TestComponent
}
];
@NgModule({
declarations: [
TestComponent,
MyStarsDirective, // <<<< adding directive here
],
providers: [
{
provide: '$scope',
useFactory: i => i.get('$rootScope'),
deps: ['$injector']
}, // <<<< added this section to fix the No provider for $scope error
],
imports: [
CommonModule,
RouterModule.forChild(thisRoute)
],
exports: [
RouterModule
]
})
export class TestModule {}