无法使“ Fitty”与Angular 2+一起使用

时间:2018-08-26 14:14:55

标签: javascript angular typescript

我正在尝试使用' Fitty '创建具有不同字体大小的文本,以适合容器内div中的对齐大小。

我正在使用Angular,看到Fitty主要是作为常规JS脚本创建的,可以在浏览器中运行。经过一番摸索后,我发现 this thread on Github ,并且有人似乎和我有相同的想法,但他们的建议是,我似乎无法工作。

我想知道以前是否有人这样做?

Here is a link to my Stackblitz(如果要检出)。我已经在其中安装了Fitty依赖项。

github线程在说什么的要旨是导入和使用,例如:

import fitty from 'fitty';

...
myElement = document.getElementById('myEl');
this.fit = fitty(myElement, { minSize: 50, maxSize: 300, multiLine: true });
this.fit.fit();

enter image description here

1 个答案:

答案 0 :(得分:2)

您正在尝试访问ngOnInit中的HTML DOM。但是,根据Angular Life Cycle钩子,我们认为也可以在ngAfterViewInit内部进行访问。

ngAfterViewInit(){
    const myDiv = document.getElementById('x');
    this.fits = fitty(myDiv, { minSize: 50, maxSize: 300})
    this.fits.fit();
}

https://stackblitz.com/edit/fitty-angular-xuafvj