html - 重用组件(Angular)
问题描述
我以角度创建了一个组件,当我每个文档都有一个组件时它工作正常。但是,当我有多个时,这会产生奇怪的行为,其中最后一个变量会影响组件的两个实例。
这是组件的 html。
<div class="thumbnail-div" id="top">
<img id="img" class="img" src="{{image}}" alt="">
<p id="text" class="text">
<a id="link" class="link" href={{link}}>{{title}}</a><br>
<i id="ita" class="itaics">By {{author}}</i>
</p>
</div>
这是父 html
<thumbnail
title={{articles[0].title}}
author={{articles[0].author}}
image={{articles[0].img}}
link="/#/articles/{{articles[0].date}}"
color='transparent'
pos='right'
long=true
>
</thumbnail>
ts文件
import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'thumbnail',
templateUrl: './thumbnail.component.html',
styleUrls: ['./thumbnail.component.css'],
})
export class ThumbnailComponent implements OnInit {
@Input() width: string;
@Input() height: string;
@Input() img_width: string;
@Input() img_height: string;
@Input() text_width: string;
@Input() text_height: string;
@Input() title: string;
@Input() author: string;
@Input() image: string;
@Input() link: string;
@Input() color: string;
@Input() fontSize: string;
@Input() ita_fontSize: string;
@Input() left: boolean;
@Input() right: boolean;
@Input() bottom: boolean;
@Input() top: boolean;
@Input() move_v: string;
@Input() move_h: string;
@Input() padding: string;
@Input() pos: string;
@Input() long:boolean;
@Input() text: boolean;
@Input() short:boolean;
@Input() thumbnail: boolean;
constructor() {
}
ngOnInit(): void {
/*
$('#top').width(this.width);
$('#top').height(this.height);
$('#img').width(this.img_width);
$('#img').height(this.img_height);
$('#text').width(this.text_width);
$('#text').height(this.text_height);
$('#text').css('background-color', this.color);
$('#text').css('font-size', this.fontSize);
$('#text').css('padding', this.padding);
if(this.left){
$('#text').css('left', this.move_h);
}else if(this.right){
$('#text').css('right', this.move_h);
}
if(this.bottom){
$('#text').css('bottom', this.move_v);
}else if(this.top){
$('#text').css('top', this.move_v);
}
*/
if(this.long){
this.longStyle();
}else if(this.text){
this.longTextStyle();
}else if(this.short){
this.shortStyle();
}else if(this.thumbnail){
this.cardStyle();
}
}
longStyle(){
/**
*
* height="300px"
img_width="100%"
img_height="100%"
fontSize="30px"
right=true
move_h="0px"
bottom=true
move_v="100px"
*/
$('#top').width('100%');
$('#top').height('500px');
$('#img').width('100%');
$('#img').height('100%');
$('#img').css('filter', 'brightness(50%)');
//$('#text').width('200px');
//$('#text').height('300px');
$('#text').css('background-color', this.color);
$('#text').css('color', 'aliceblue');
$('#text').css('font-size', '30px');
$('#ita').css('font-size', '20px');
//
if(this.pos == 'left'){
$('#text').css('left', '100px');
}else if(this.pos = 'right'){
$('#text').css('right', '100px');
}
$('#text').css('bottom', '50px');
}
longTextStyle(){
/**
*
* height="300px"
img_width="100%"
img_height="100%"
fontSize="30px"
right=true
move_h="0px"
bottom=true
move_v="100px"
*/
$('#top').width('80%');
$('#top').height('600px');
$('#top').css('margin', '0 auto');
$('#img').width('100%');
$('#img').height('70%');
$('#img').css('filter', 'brightness(50%)');
$('#link').css('pointer-events', 'none');
$('#ita').css('display', 'none');
$('#text').css('text-decoration', 'none');
$('#text').css('padding', '20px');
$('#text').css('background-color', this.color);
$('#text').css('font-size', '20px');
$('#ita').css('font-size', '15px');
$('#text').width('80%');
$('#text').css('margin-left', '50px');
//$('#text').css('right', '100px');
$('#text').css('bottom', '70px');
}
shortStyle(){
/**
*
* height="300px"
img_width="100%"
img_height="100%"
fontSize="30px"
right=true
move_h="0px"
bottom=true
move_v="100px"
*/
$('#top').width('100%');
$('#top').height('400px');
$('#img').width('80%');
$('#img').height('100%');
$('#img').css('filter', 'brightness(50%)');
$('#text').width('250px');
$('#text').css('vertical-align', 'middle');
$('#text').height('250px');
$('#text').css('padding', '25px');
$('#text').css('background-color', this.color);
$('#text').css('font-size', '25px');
$('#ita').css('font-size', '15px');
//
if(this.pos == 'left'){
$('#img').css('right', '0px');
$('#text').css('left', '60px');
}else if(this.pos = 'right'){
$('#text').css('right', '100px');
}
$('#text').css('bottom', '50px');
}
cardStyle(){
/**
*
* height="300px"
img_width="100%"
img_height="100%"
fontSize="30px"
right=true
move_h="0px"
bottom=true
move_v="100px"
*/
$('#top').width('300px');
$('#top').height('300px');
$('#img').width('100%');
$('#img').height('70%');
$('#img').css('filter', 'brightness(50%)');
$('#text').css('padding', '10px');
$('#text').css('background-color', this.color);
$('#text').css('font-size', '18px');
$('#ita').css('font-size', '15px');
//
//$('#text').css('right', '100px');
$('#text').css('bottom', '20px');
}
基本上我想重用具有不同样式和变量的相同组件。在这个例子中我只使用了几个变量,而不是全部。我看到了一些根本不清楚的解释。我决定问一下,这样我就可以对我的特定示例进行解释。我真的很感激这个问题的答案。感谢你们。
解决方案
父.html
<div class="thumbnail-div" id="top">
<img id="img" class="img" src="{{image}}" alt="" [ngStyle]="myStyle">
<p id="text" class="text">
<a id="link" class="link" href={{link}}>{{title}}</a><br>
<i id="ita" class="itaics">By {{author}}</i>
</p>
</div
父.ts
@Input() myStyle: any;
child.html
<thumbnail
title={{articles[0].title}}
author={{articles[0].author}}
image={{articles[0].img}}
link="/#/articles/{{articles[0].date}}"
color='transparent'
pos='right'
long=true
[myStyle]= "newStyle"
>
</thumbnail>
child.ts
newStyle: any;
onInit() {
this.newStyle = {
backgroundColor: 'red';
}
推荐阅读
- microsoft-graph-api - Microsoft Graph api 返回具有空分配字段的任务
- python - 我可以在我的 `bottle 应用程序中使用 python-social-auth 吗?
- flutter - 'flutter run' 编译不同目录中的文件
- amazon-web-services - 如何使用本地网络设置反向 DNS 查找?
- python - 如何从 NLTK 中标记的结果中获取前三个单词
- javascript - 将 JSON 显示为类似于下载的弹出窗口
- python - 即使安装了 Python 3,由于 Python 已弃用,Ansible 也无法完成
- python - 如何计算熊猫多列之间的最大值/排名?
- reactjs - 在 React 中有效地在孩子和父母之间同步数据
- angular - 从行为主体观察到的不能正常工作