WedX - журнал о программировании и компьютерных науках

Angular — при изменении размера элемента HTML

Я использую Angular 5. Я пытаюсь сделать адаптивную боковую панель навигации. Когда ширина окна изменяется, мне нужно применить некоторые события (css, контент и т.д.). В моем примере я хочу изменить внутренний HTML-текст, когда ширина окна меньше 1080 пикселей.

Я попробовал три способа. По javascript и ng-модели, но ничего.

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-модель):

@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-модель) способ. Какие-либо предложения?


  • Вы можете использовать ElementRef, а затем ElementRef.nativeElement для доступа к элементу dom. 04.05.2018
  • Приведите пример. Напишите решение. 04.05.2018

Ответы:


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 как геттер (не обрабатывая событие resize):

get introText(): string {
  return window.innerWidth < 1080 ? "New" : "Welcome";
}
04.05.2018
  • Какой вариант лучше первый или второй по производительности? 05.05.2018
  • По производительности я бы предпочел первый. Вызов window.innerWidth, вероятно, занимает больше времени, чем просто доступ к переменной introText. 05.05.2018
  • Кстати, я видел ваш новый вопрос: вам не нужно устанавливать [innerHTML], если вы используете интерполяцию. Выберите одно или другое, а не оба. После проверки снова: используйте [innerHTML], потому что интерполяция не принимает HTML-разметку (если вы ее не санируете). 05.05.2018

  • 2

    Чтобы получить элемент вместо использования document.getElementById("elp1"), попробуйте ViewChild углового, если дочерний элемент компонента, или ElementRef для самого компонента. Как здесь выглядит дочерний элемент компонента, вы можете использовать ViewChild

    Вы получите доступ к элементу в угловом компоненте.

    так что теперь ваш 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";
    

    Надеюсь это поможет.

    04.05.2018
  • Uncaught (в обещании): TypeError: невозможно прочитать свойство «nativeElement» неопределенного 04.05.2018
  • Где вы определили этот @ViewChild('elp1') link; в компоненте? Любая скрипка, чтобы посмотреть? 04.05.2018
  • Да внутри компонента. Когда я помещаю снаружи под импорт, он показывает мне другую ошибку: ReferenceError: ссылка не определена. Хорошо, подожди скрипку. 04.05.2018
  • да, он должен быть внутри компонента. После изменения HTML и этого изменения ссылка должна содержать ссылку cmp. Любая скрипка, пожалуйста? 04.05.2018
  • jsfiddle.net/weblaravel/b4ef53jb Думаю, это должно сработать, но это еще не все... 04.05.2018
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]