Html 在Angular 8中使用ngIf更改图像时编写语法时出现问题
我是Angular世界的新手,在编写代码或语法以显示基于ngx翻译方法的不同图像时遇到了问题。假设当用户在语言选择器中选择英语时,图像的英语文字将出现;否则,如果用户在语言选择器中选择普通话,则会显示图像的普通话文字。我提出的ngIf编码如下: 下面是ts和html文件中的相关编码,感谢您的帮助(ya:) .ts文件:Html 在Angular 8中使用ngIf更改图像时编写语法时出现问题,html,css,angular,image,angular-ng-if,Html,Css,Angular,Image,Angular Ng If,我是Angular世界的新手,在编写代码或语法以显示基于ngx翻译方法的不同图像时遇到了问题。假设当用户在语言选择器中选择英语时,图像的英语文字将出现;否则,如果用户在语言选择器中选择普通话,则会显示图像的普通话文字。我提出的ngIf编码如下: 下面是ts和html文件中的相关编码,感谢您的帮助(ya:) .ts文件: import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgbCar
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgbCarousel, NgbSlideEvent, NgbSlideEventSource } from '@ng-bootstrap/ng-bootstrap';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
import {TranslateService} from '@ngx-translate/core';
import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
import defaultLanguage from "../../assets/i18n/en.json";
//import {imgArray} from '../../assets/i18n/en.json';
//import * as dataJSON from '../../assets/i18n/en.json';
@Component({
selector: 'ngbd-carousel-pause',
templateUrl: './carousel-pause.html',
encapsulation: ViewEncapsulation.None,
styles:[`
.carousel-item
{
display:block;
opacity:0;
transition: opacity 2s;
}
.carousel-item.active
{
display:block;
opacity:1;
transition: opacity 2s;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");
}
.form-control{
width: 200px !important;
height: 30px;
}
.account-form{
padding-left: 30px;
}
`]
})
export class NgbdCarouselPause {
constructor(private translate: TranslateService) {
translate.setTranslation('en', defaultLanguage);
translate.setDefaultLang('en');
}
useLanguage(language: string) {
this.translate.use(language);
}
//readJSON = dataJSON;
//constructor(){
//this.images2 = imgArray;
//}
images = [
"assets/banner1.jpg",
"assets/banner2.png",
"assets/banner3.png",
"assets/banner4.jpg",
"assets/banner5.jpg",
"assets/banner6.jpg"
];
paused = false;
unpauseOnArrow = false;
pauseOnIndicator = false;
pauseOnHover = true;
@ViewChild('carousel', {static : true}) carousel: NgbCarousel;
togglePaused() {
if (this.paused) {
this.carousel.cycle();
} else {
this.carousel.pause();
}
this.paused = !this.paused;
}
onSlide(slideEvent: NgbSlideEvent) {
if (this.unpauseOnArrow && slideEvent.paused &&
(slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) {
this.togglePaused();
}
if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
this.togglePaused();
}
}
}
.html文件:
<div class="container">
<div class="row">
<div class="col-sm-9">
<ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
<ng-template ngbSlide *ngFor="let img of images; index as i">
<!--<div class="carousel-caption">
<h3>My slide {{i + 1}} title</h3>
</div>-->
<a href="https://www.google.fr/?q=Number+{{i+1}}" target="_blank" rel="nofollow noopener noreferrer">
<div class="picsum-img-wrapper">
<img class="img-fluid class mx-auto" [src]="img" alt="My image {{i + 1}} description">
</div>
</a>
</ng-template>
</ngb-carousel>
</div>
<!--
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pauseOnHover" [(ngModel)]="pauseOnHover">
<label class="form-check-label" for="pauseOnHover">Pause on hover</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="unpauseOnArrow" [(ngModel)]="unpauseOnArrow">
<label class="form-check-label" for="unpauseOnArrow">Unpause when clicking on arrows</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pauseOnIndicator" [(ngModel)]="pauseOnIndicator">
<label class="form-check-label" for="pauseOnIndicator">Pause when clicking on navigation indicator</label>
</div>
<button type="button" (click)="togglePaused()" class="btn btn-outline-dark btn-sm">
{{paused ? 'Cycle' : 'Pause' }}
</button>
-->
<div class="col-sm-3">
<div ngIf="translate==='en'">
<img src="./assets/opening-account.png" class="img-fluid">
</div>
<!--</div>-->
<!--<div class="img-fluid">
{{ 'imgArray.img' | translate }}
</div>-->
<div class="account-form">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Firstname" aria-label="Search">
<br><br>
<input class="form-control mr-sm-2" type="search" placeholder="Lastname" aria-label="Search">
<br><br>
<input class="form-control mr-sm-2" type="search" placeholder="Email" aria-label="Search">
<br><br>
</form>
</div>
<img src="./assets/joinnow.png" class="img-fluid">
</div>
</div>
</div>
使用翻译currengLang方法
换行
<div ngIf="translate==='en'">
这条线
<div ngIf="translate.currentLang === 'en' ">
每日勾选。顺便说一句,我注意到只有当用户选择这些语言时才会出现图像。如果页面加载且用户未选择任何语言,图像将不会显示,是否有我遗漏的内容?@Shen在ngOnInit上初始化translate的值