开发者问题收集

Angular - 调整大小时更改 html 元素

2018-05-04
3231
javascript angular typescript

我正在使用 Angular 5。我想做的是响应式侧边导航栏。当窗口宽度发生变化时，我需要应用一些事件（css、内容等）。在我的示例中，当窗口宽度低于 1080 像素时，我想更改内部 Html - 文本。

我尝试了三种方法。通过 javascript 和 ng-model，但没有任何效果。

Html: 

<div id="nav-left">
    <mat-list>
     <mat-list-item><a id="elp1" [routerLink]="['/']" fragment="intro-text" ng-model="innerHtml"> Welcome </a></mat-list-item>
     <mat-list-item><a id="elp2" [routerLink]="['/']" fragment="introduction"> Introduction </a></mat-list-item>
     ...
    </mat-list>
</div>

组件（第一种方式）： 

@HostListener('window:resize', ['$event'])
    onResize(event?) {      
      this.screenWidth = window.innerWidth;
      let bgScreen = true;
      let smScreen = true;
      if(this.screenWidth < 1080 && smScreen){
        document.getElementById("elp1").innerHTML = "New";

        smScreen = false; 
        bgScreen = true;

      }else if(this.screenWidth >= 1080 && bgScreen){
        document.getElementById("elp1").innerHTML = " Welcome ";

        bgScreen = false;
        smScreen = true;        
      }else{
        console.log('problem');
      }
    }

在这种情况下，我收到一个控制台错误： 

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

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

@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');
              }
            }

没有错误，但它不起作用。

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

我不想使用 jQuery。只使用 typescript 或 angular (ng-model) 方式。有什么建议吗？

2个回答

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

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

当调整窗口大小时，可以修改公共属性 introText ： 

introText = "Welcome";

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

或者，作为替代方案，您可以将 introText 定义为 getter（不处理 resize 事件）： 

get introText(): string {
  return window.innerWidth < 1080 ? "New" : "Welcome";
}
ConnorsFan
2018-05-04

要获取元素，请尝试使用 document.getElementById("elp1") ，而不是使用 viewChild （如果是组件的子元素），或者 elementref （组件本身）。由于这里看起来是组件的子元素，因此您可以使用 viewChild

您将可以访问 angular 组件中的元素。

所以现在您的 HTML 将是 

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

在 @component 中 

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

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

希望这能有所帮助。

ngChaitanya
2018-05-04