如何根据angular 6中的单击事件更改边框半径
如何根据angular 6中的单击事件更改边框半径
提问于 2018-08-02 02:28:22
我有两个不同的html文件，
test1.html test2.html test2.component.ts
1) test1.html：
<div style="width:100%;height:20%"></div>2) test2.html：
如果单击rectangle function，test1.html边框半径应更改为0px。
如果我点击roundCorder函数，test1.html边框半径应该会变成10px；
<img (click)="rectangle()" [src]="imgSrc" (mouseover)="rectangleHover()" (mouseout)="rectangleOut()" style="height:100px;float:left;margin:15px;" >
<img (click)="roundCorner()" [src]="imgSrc1" (mouseover)="roundHover()" (mouseout)="roundOut()" style="height:100px;float:left;margin:15px;">
3) test2.components.ts：
roundCorner(){
// want to change test1.html file div border radius as 10px;
}回答 3
Stack Overflow用户
发布于 2018-08-02 11:50:27
您可以简单地传递HTML并向其添加样式，如下所示：
HTML
<div #divElement style="width:100%;height:20%"></div>
<button (click)="rectangle(divElement)">Rectangle</button>
<button (click)="circle(divElement)">Circle</button>打字脚本
rectangle(divElement) {
divElement.style.borderRadius = '0px'
console.log(divElement.style)
}
circle(divElement) {
divElement.style.borderRadius = '50%'
console.log(divElement.style)
}Stack Overflow用户
发布于 2018-08-02 02:57:16
test1是您的父组件，test2是您的子组件。如果是这种情况，您可以使用EventEmitter()发出一个事件，其值为来自子组件的rectangle/square。您可以在父组件中读取该事件并使用ngStyle更新DOM。
Stack Overflow用户
发布于 2018-08-02 03:22:26
test1.html
<div #elem1 style="width:100%;height:20%"></div>test2.html
<img #elem2 (click)="rectangle()" [src]="imgSrc" (mouseover)="rectangleHover()" (mouseout)="rectangleOut()" style="height:100px;float:left;margin:15px;" >
<img (click)="roundCorner()" [src]="imgSrc1" (mouseover)="roundHover()" (mouseout)="roundOut()" style="height:100px;float:left;margin:15px;"> test2.component.ts
import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('elem2') el:ElementRef;
constructor(private rd: Renderer2,sharedService:SharedService) {
this.el=this.sharedService.get();
}
roundCorner(){
// want to change test1.html file div border radius as 10px;
this.el.style.border-radius='10px';
}
rectangle(){
this.el.style.border-radius='0px';
}shared.service.ts
@Injectable()
class SharedService{
let elem1:any
set(element:any)
{
this.elem1=element;
}
get(){
return this.elem1;
}test1.component.ts
@ViewChild('elem1'):ElementRef
constructor(sharedService:SharedService,elementRef:ElementRef){
}
ngOnInit()
{
this.sharedService(this.elem1);
}您必须使用一个共享服务来访问两个组件之间的dom元素引用变量，然后分别设置边框半径的属性。
在component.ts文件和app.module.ts中导入{ SharedService }，并将SharedService放在app.module.ts中的提供程序数组下
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51640029
复制相关文章
相似问题
腾讯云开发者
