Я использую 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-модель) способ. Какие-либо предложения?
window.innerWidth
, вероятно, занимает больше времени, чем просто доступ к переменнойintroText
. 05.05.2018[innerHTML]
, если вы используете интерполяцию. Выберите одно или другое, а не оба. После проверки снова: используйте[innerHTML]
, потому что интерполяция не принимает HTML-разметку (если вы ее не санируете). 05.05.2018