小编Wil*_*ill的帖子

在Angular Component中使用AngularJS指令

我正在尝试升级angularjs指令以使用它我的角度组件.我已经实现了混合(ng1 + ng2)环境.我也可以在角度中注入angularjs服务并在角度组件中使用它们(我实际上即使使用angularjs 1.4.x也可以使用它).

现在我试图在角度中使用现有的angularjs指令,但不能正常工作.

作为参考,是我的代码的一些片段.

[index.html](my-app是Angular 4根组件)

...
<body>
    <div class="banner">Angular Migration</div>
    <my-app>Loading...</my-app>
...
</body>
...

Run Code Online (Sandbox Code Playgroud)

[main.ts](引导代码)

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();
});

Run Code Online (Sandbox Code Playgroud)

[app.module.ts](Angular 4模块)

import { NgModule, Component } from '@angular/core';
import { HashLocationStrategy, LocationStrategy, CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { …

Run Code Online (Sandbox Code Playgroud)

upgrade hybrid angularjs angularjs-directive angular

Wil*_*ill

lucky-day

9
推荐指数

1
解决办法

5454
查看次数

是否可以升级angularjs atttribute指令以在角度4中使用？

我已经能够升级angularjs元素指令以在角度4中使用.这是一个示例代码:

[myScores.js]

angular.module('app.components.directives.myScores', [])
.directive('myScores', function() {
  return {
    scope: {
      score: '=',
    },
    template: '<div>&gt;&gt;&gt; Your score is {{score}} &lt;&lt;&lt;',
    link: function(scope) {
      console.log("in myScores", scope)
    }
  };
});

Run Code Online (Sandbox Code Playgroud)

[myScores.ts]

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
  selector: 'my-scores'
})
export class MyScoresDirective extends UpgradeComponent {
  @Input() score: number;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('myScores', elementRef, injector);
  }
}

Run Code Online (Sandbox Code Playgroud)

注意我正在使用UpgradeComponent来升级myScores元素指令.我在属性指令上尝试过相同但是出错了.有没有办法升级属性指令？

这是我尝试升级属性指令:

[makeGreen.js]

angular.module('app.components.directives.makeGreen', [])
.directive('makeGreen', function() {
  return …

Run Code Online (Sandbox Code Playgroud)

attributes directive upgrade angularjs

Wil*_*ill

2018 09-27

8
推荐指数

1
解决办法

2187
查看次数

Angular 5 router.navigate 不起作用

我正在尝试根据某些条件将用户重定向到另一个页面。这是我的示例登录组件：

  ngOnInit() {
    console.log(">>> router", this.router)
    console.log(">>> activatedRoute", this.activatedRoute)

    if (this.activatedRoute.queryParams['value'].param === 'value') {
      console.log(">>> redirecting")
      this.router.navigate(['home']);
    }
  }

Run Code Online (Sandbox Code Playgroud)

如果我导航到没有参数的登录组件，那么我会看到登录组件模板，这很好。

但是，当我使用名为 param 的参数和 value 的值导航到登录组件时，我想将用户重定向到主页。这是行不通的。

这是我的主页路线：

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

import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(thisRoute, {
      useHash: true, initialNavigation: false
    })
  ],
  declarations: [
    HomeComponent
  ]
})
export class HomeModule { }

Run Code Online (Sandbox Code Playgroud)

我已经在github中创建了一个测试项目供您下载并在您的计算机上运行。只需下载这个项目：https …

redirect routing navigateurl angular

Wil*_*ill

2018 04-07

6
推荐指数

2
解决办法

7万
查看次数

无法在Chrome Developer Tools控制台中更改变量

我曾经能够在javascript函数中放置一个断点并将变量值更改为debug.这一直工作到最近(一两周内).

这是一个例子:

function test(params) {
  var result = params.num * 2;

  // if I put a break point here and change result = undefined,
  // it doesn't work
  return result;  
}


// I should get 6, but when debugging and changing result to undefined,
// I should get undefined in my output, used to, not anymore    
var x = test({ num: 3 });

console.log(x);

Run Code Online (Sandbox Code Playgroud)

我正在使用OSX Yosemite Chrome v.49.0.2623.110(64位)

它是最新的,我刚刚重启了Chrome.

我一直这样做,但最近发生了一些事情,我不能再这样了.任何帮助将不胜感激.

谢谢

debugging google-chrome developer-tools

Wil*_*ill

2016 04-01

3
推荐指数

1
解决办法

2363
查看次数

需要访问Angular 5指令文本

我正在尝试创建一个自定义指令来替换我的自定义指令的内部文本。我似乎无法访问内部文本内容以应用一些逻辑。

这是代码：

import { Directive, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';

@Directive({
  selector: 'text-transformer'
})
export class TextTransformerDirective {
  constructor(
    private elem: ElementRef) {
      // need access to inner text before setting new text
      // elem.nativeElement.outerHTML, innerHTML, outerText, innerText are all empty at this point
      elem.nativeElement.outerHTML = '<span>My new Text</span>';
  }
}

Run Code Online (Sandbox Code Playgroud)

用法：

<text-transformer>Some text</text-transformer>

Run Code Online (Sandbox Code Playgroud)

我想检查标记内的文本，在这种情况下为“某些文本”。我似乎无法在指令中访问它。

我应该改为使用组件吗？

directive innerhtml innertext angular elementref

Wil*_*ill

2018 03-21

3
推荐指数

1
解决办法

2793
查看次数

如何在Typescript类中创建Angular 5 HttpClient实例

我正在写一个包含httpClient的基类。它用于进行REST api调用。如果在构造函数中定义了httpClient变量，则设置正确，但在私有变量中则未设置。

这是我的示例代码：

@Injectable()
export class MyBaseClass implements {
  private httpClient = HttpClient

  constructor(
    private httpClient2: HttpClient
  ) {
    console.log("httpClient2", httpClient2)
    console.log("httpClient2.get", httpClient2.get)
  }
  callApi() {
    console.log("httpClient", this.httpClient)
    console.log("httpClient.get", this.httpClient.get)
  }
}

Run Code Online (Sandbox Code Playgroud)

构造函数输出：