Question

我在我的项目中使用 ng2-typewriter ，我希望它可以作为单身人士使用，以便我可以重复使用它。

到目前为止一切都还可以，但我已经遇到了插件的预设方法，而且我很难实现自己的 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);
        }
    }
}

Answer 1

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

注意： 我仍然在学习Angular 2.如果上述句子中的任何内容没有意义，请更好地理解这一点的人，改善我。< / em>的

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

Angular 2 - 使用@Input将数据传递到ng2打字机

1 个答案: