Javascript 角度-更改html元素的大小

我用的是角5。我正在尝试做的是一个响应迅速的侧导航栏。当窗口宽度改变时，我需要应用一些事件（css、内容等）。在我的示例中，当窗口宽度低于1080像素时，我想更改内部Html文本

我试了三种方法。通过javascript和ng模型，但什么都没有

Html:

组件（第二种方式）：

组件（第三种方式和ng模式）：

@HostListener（'window:resize'，['$event']））
onResize（事件？{
this.screenWidth=window.innerWidth；
如果（此屏幕宽度<1080）{
让innerHtml:string=“New”；
}否则如果（this.screenWidth>=1080）{
让innerHtml:string=“欢迎”；
}否则{
console.log（“问题”）；
}
}

没有错误，但它不工作

1） 第一个问题是上述错误。 2） 第二，正如您在“第一种方式”示例中看到的，我尝试添加标志触发效果，但意识到这也不起作用。变量“bgScreen”和“smScreen”始终为真。我把它们放在一个更好的编码流程中

---

我不想使用jQuery。仅打印脚本或使用角度（ng模型）方式。有什么建议吗

获取元素，而不是使用

document.getElementById（“elp1”）

尝试组件子元素的

ViewChild

，或组件本身的

ElementRef

。在这里，它看起来是您可以使用的组件的子元素

ViewChild

您将获得对angular component中元素的访问权限

所以现在你的HTML应该是

<mat-list-item><a #elp1 [routerLink]="['/']" fragment="intro-text"> Welcome </a></mat-list-item>

---

希望这有帮助。

我建议使用数据绑定来设置链接的内容：

<div id="nav-left">
  <mat-list>
    <mat-list-item><a [routerLink]="['/']" fragment="intro-text"> {{introText}} </a></mat-list-item>
     ...
  </mat-list>
</div>

或者，也可以将

introText

定义为getter（不处理

resize

事件）：

get introText（）：字符串{
return window.innerWidth<1080？“新建”：“欢迎”；
}

您可以使用

ElementRef

然后使用

ElementRef.nativeElement

访问dom元素。请给出一个示例。编写一个解决方案。Uncaught（承诺中）：TypeError:无法读取未定义的属性'nativeElement'，您在何处定义了此

@ViewChild（'elp1'）链接在组件中？有小提琴要看吗？是的，里面有。当我将outside置于import下时，它会显示其他错误：ReferenceError:未定义链接。好的，等一下小提琴。是的，它应该在部件内部。在Html更改和此更改之后，Link必须保留链接cmp。有小提琴吗？我想这应该行得通，但还不是全部……对于性能来说，第一个还是第二个是最好的选择？对于性能，我更喜欢第一个。调用
窗口。innerWidth
可能比简单地访问
introText
变量花费更多的时间。顺便说一下，我看到了您的：如果使用插值，您不需要设置
[innerHTML]
。选择其中一个，而不是两个。再次检查后：使用
[innerHTML]
，因为插值不接受HTML标记（除非对其进行清理）。
Uncaught (in promise): TypeError: Cannot set property 'innerHTML' of null

@HostListener('window:resize', ['$event'])
        onResize(event?) {      
          this.screenWidth = window.innerWidth;

          if(this.screenWidth < 1080){
            let element = <HTMLInputElement>document.getElementById("elp1");
            element.value = "New";

          }else if(this.screenWidth >= 1080){
            let element = <HTMLInputElement>document.getElementById("elp1");
            element.value = "Welcome";      
          }else{
            console.log('problem');
          }
        }

Uncaught (in promise): TypeError: Cannot set property 'value' of null

@HostListener('window:resize', ['$event'])
            onResize(event?) {      
              this.screenWidth = window.innerWidth;

              if(this.screenWidth < 1080){
                let innerHtml :string = "New";

              }else if(this.screenWidth >= 1080){
                let innerHtml :string = "Welcome";      
              }else{
                console.log('problem');
              }
            }

<mat-list-item><a #elp1 [routerLink]="['/']" fragment="intro-text"> Welcome </a></mat-list-item>

import { ViewChild} from '@angular/core';
.
.
@ViewChild('elp1') link;

//And assign values like below now.
this.link.nativeElement.innerHTML = "New";

<div id="nav-left">
  <mat-list>
    <mat-list-item><a [routerLink]="['/']" fragment="intro-text"> {{introText}} </a></mat-list-item>
     ...
  </mat-list>
</div>

introText = "Welcome";

@HostListener("window:resize", ["$event"])
onResize(event) {      
  this.introText = window.innerWidth < 1080 ? "New" : "Welcome";
}

get introText(): string {
  return window.innerWidth < 1080 ? "New" : "Welcome";
}