Question

我正在使用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

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

@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。只有打字稿或角度（ng-model）方式。有什么建议？

Answer 1

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

<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";
}

Answer 2

要获取元素，而不是使用document.getElementById("elp1")尝试ViewChild angular if ElementRef组件的子元素，或ViewChild组件本身。在这里它看起来可以使用<mat-list-item><a #elp1 [routerLink]="['/']" fragment="intro-text"> Welcome </a></mat-list-item>

的Component的子元素

您将获得角度组件中元素的访问权。

所以现在你的HTML将是

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

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

和@component

$rawm_jan_full=Yii::app()->db->createCommand("SELECT COUNT(trainings_id) AS trail_list from children WHERE MONTH(timestamp) = '1' AND YEAR(timestamp) ='".$previous_year."' AND trainings_id IS NULL ")->queryRow();

print_r($rawm_jan_full);

希望这有帮助。

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

2 个答案: