角2 - 使用@input传递数据到NG2打字机

我使用ng2-typewriter在我的项目，我想它作为一个单身，这样我可以重复使用。角2 - 使用@input传递数据到NG2打字机

到目前为止一切都还好，但我已经遇到了插件的预设方法，并且我很难实现我自己的插件的input。

我想将我的@Input firstLine: string;到this.contents = this.tws.format([*]);，但它只接受一个字符串值，并this.firstLine不带引号没有反应。

import { Component, ViewChild, ElementRef, OnInit, Input } from '@angular/core'; 
import { TypewriterService, TypewriterContent } from 'ng2-typewriter'; 

@Component({ 
    moduleId: module.id, 
    selector: 'hero-typer', 
    templateUrl: 'hero-typer.component.html' 
}) 

export class HeroTyperComponent implements OnInit { 

    @Input() firstLine: string; 

    name: string; 
    contents: TypewriterContent[] = []; 
    wecraft: TypewriterContent[] = []; 
    isDone: boolean = false; 
    _class: string = ''; 

    constructor(private tws: TypewriterService) { 
     this.name = 'Hello Angular2'; 
     this.contents = this.tws.format(['First line of text ']); 
    } 

    public ngOnInit() { 
    this.contents.map((v: TypewriterContent, i: number) => { 
     if (i === 1) { 
      v.setSpecialWord('10'); 
     } 
    }); 
} 

onDone(isDone: boolean): void { 
    if (isDone) { 
     this._class = 'completed'; 
     this.name = 'The typewriter is done.'; 
     setTimeout(() => this.isDone = isDone, 0); 
     } 
    } 
}

来源

2017-03-16 snkv

名强烈此处键入它是字符串类型，这样this.firstLine如何能接受比其他值？ –

正是我在这里试图解决的，这就是为什么我提出了参考。 This - 'this.contents = this.tws.format（[this.firstLine]）;'不能使用绑定到标签，尽管它接受字符串。 – snkv

如果你不确定类型为什么不放置任何字符串而不是字符串 –

问题解决了。问题是我已将内容引用放在constructor中，它们应该位于ngOnInit()函数中，而将constructor留给服务。

注：我仍然在学习角2的过程中如果上面这句话什么没有意义，请别人谁明白这一点更好，提高了我这一点。

export class HeroTyperComponent implements OnInit { 

    @Input() firstLine: string; 

    name: string; 
    contents: TypewriterContent[] = []; 
    wecraft: TypewriterContent[] = []; 
    isDone: boolean = false; 
    _class: string = ''; 

    constructor(private tws: TypewriterService) { } 

    public ngOnInit() { 
     this.contents.map((v: TypewriterContent, i: number) => { 
      if (i === 1) { 
       v.setSpecialWord('10'); 
      } 
     }); 
     this.name = 'Hello Angular2'; 
     this.contents = this.tws.format([this.firstLine]); 
    }

来源

2017-03-16 10:17:07 snkv

角2 - 使用@input传递数据到NG2打字机

回答

相关问题