如何根据角度6中的点击事件更改边框半径答案

【问题标题】：How to change border radius based on click event in angular 6如何根据角度6中的点击事件更改边框半径
【发布时间】：2019-01-09 10:09:16
【问题描述】：

我有 2 个不同的 html 文件，

test1.html test2.html test2.component.ts

1) test1.html：

   <div style="width:100%;height:20%"></div>

2) test2.html :

如果我点击矩形函数，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;
  }

【问题讨论】：

到目前为止你尝试了什么？
提示：使用 [style.border-radius]="what ever"
基于条件@Eliseo
尝试一下并编辑问题。我不知道您是否有一个、两个或三个组件，或者您的问题是组件之间的通信还是只是绑定 [style.property]。对不起，我不能再这样做了

标签： html css angular angular5 angular6

【解决方案1】：

您可以简单地传递 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)
  }

Stakblitz

【讨论】：

2 个不同的 html 和 typescript 文件 @Aravind。我该怎么做？
能否详细说明
据我了解只有一个html文件都是test1.html
test1.html 和 test2.html。请参阅我的问题的第一行。请正确阅读
2 个不同的 html 文件，但没有提到 pannirukan parunga。并查看我的代码

【解决方案2】：

test1 是你的父组件，而 test2 是你的子组件。如果是这种情况，您可以使用 EventEmitter() 发出一个事件，其值为来自子组件的矩形/正方形。您可以在父组件中读取该事件并使用 ngStyle 更新 DOM。

【讨论】：

【解决方案3】：

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元素引用变量，然后分别设置border-radius的属性

在 component.ts 文件和 app.module.ts 中导入 {SharedService} 并将 SharedService 放在 app.module.ts 中的 providers 数组下

【讨论】：

我在 shared.service.ts 文件中遇到错误。找不到名称“让”、“设置”、“获取”和找不到名称“元素”。您是说“元素”吗？
test1.component.ts 也同样的错误找不到名称 'sharedService' 。 ngOnInit() 内部
我添加了一些更改@sathishkumar