我有个问题，应该很简单，但我漏了点什么。
这是我的stackbiltz。https:/stackblitz.comeditangular-j7j3jk。
我想做的是使用例子中出现在 "LAST NAME "下的一个div来出现在任何字段下。 我想让SLIDER给人的感觉是每个输入字段都有一个单独的div，但是，它其实是多态的。 点击EXCLAMATION点，显示隐藏的div（slider）。 忽略OPEN MODAL BUTTON，因为那只是一个普通的bootstrap modal。
下面是我的HTML
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard='false'>
Open modal
</button>
<br><br>
<div id="inputcontainer">
<input id="inlinetext" placeholder="Enter First Name" name="inlinetext" maxlength="20" [(ngModel)]="firstname">
<a href="javascript:;" (click)="trigger();"
title="click to write a review"> <span class="info">!</span></a>
</div>
<br>
<div id="inputlastcontainer">
<input id="inlinelasttext" placeholder="Enter Last Name" name="inlinelasttext" maxlength="20" [(ngModel)]="lastname">
<a href="javascript:;" (click)="trigger();"
title="click to write a review"> <span class="info">!</span></a>
</div>
<div id="slider" class="slide-up">
<div class="contentcontainer">
<div class="contents">
<p>Flag field for review</p>
<input id="reviewText" maxlength="25" class="inputfield" [(ngModel)]="inlinetext" placeholder="Enter a review">
<button id="btnCancelInline" type='button' data-dismiss="modal" (click)="cancelClose('inline');">Cancel</button>
<button id="btnSaveInline" type='button' data-dismiss="modal"(click)="saveComment('inline');">Comment</button>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Flag field for review</h4><br>
<p>Leave a comment for other collaborators.</p>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input placeholder="Enter a review comment" name="textfield" id="textfield" maxlength="20" [(ngModel)]="textname">
</div>
<div class="modal-footer">
<button id="btnCancel" type='button' data-dismiss="modal" (click)="cancelClose('modal');">Cancel</button>
<button id="btnSave" type='button' data-dismiss="modal"(click)="saveComment('modal');">Comment</button>
</div>
</div>
</div>
</div>
</div>
这里是app.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
textname: string = "";
inlinetext: string = "";
inlinelasttext: string = "";
slider: HTMLElement;
public ngOnInit() {}
public ngAfterViewInit() {
this.slider = document.querySelector("#slider") as HTMLElement;
}
public open() {
if ("Some condition") {
// Dont open the modal
} else {
// Open the modal
}
}
public cancelClose(wherefrom): void {
if (wherefrom === "modal") {
this.textname = "";
}
if (wherefrom === "inline") {
this.inlinetext = "";
this.trigger();
}
}
public saveComment(wherefrom): void {
if (wherefrom === "inline") {
alert("This is the value you saved INLINE: " + this.inlinetext);
this.inlinetext = "";
this.trigger();
}
if (wherefrom === "modal") {
alert("This is the value you saved MODAL: " + this.textname);
this.textname = "";
}
}
public trigger(): void {
this.slider.classList.toggle("slide-down");
}
}
这里是CSS
.container{
padding:20px;
}
.info {
font-weight: bolder;
}
.contents {
background: lightgrey;
color: rgba(0, 0, 0, .8);
padding: 19px;
margin: 0;
border: 1px darkgrey solid;
width: 230px;
height: 120px;
}
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
.contentsborder {
border: 1px 1px 1px 0px solid #000;
}
.inputfield {
margin-bottom: 5px;
}
#btnSaveInline {
float: right;
}
#btnCancelInline {
margin-left: 45px;
}
基本上，一个DIV(SLIDER)可以容纳任意'n'个表单字段。
谅谅
下面是正确的方法。
首先是HTML。
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >
Open modal
</button>
<br><br>
<div id="inputcontainer">
<input id="inlinetext" placeholder="Enter First Name" name="inlinetext" maxlength="20" [(ngModel)]="firstname">
<a href="javascript:;" (click)="trigger(); showSlide=!showSlide; firstNamePos=true; lastNamePos=false"
title="click to write a review"> <span class="info">!</span></a>
</div>
<br>
<div id="inputlastcontainer">
<input id="inlinelasttext" placeholder="Enter Last Name" name="inlinelasttext" maxlength="20" [(ngModel)]="lastname">
<a href="javascript:;" (click)="trigger(); showSlide=!showSlide; lastNamePos=true; firstNamePos=false"
title="click to write a review"> <span class="info">!</span></a>
</div>
<div id="slider" class="slide-up" [ngClass]="{'show-slide': showSlide, 'first-name-pos': firstNamePos, 'last-name-pos': lastNamePos}">
<div class="contentcontainer">
<div class="contents">
<p>Flag field for review</p>
<input id="reviewText" maxlength="25" class="inputfield" [(ngModel)]="inlinetext" placeholder="Enter a review">
<button id="btnCancelInline" type='button' data-dismiss="modal" (click)="cancelClose('inline');">Cancel</button>
<button id="btnSaveInline" type='button' data-dismiss="modal"(click)="saveComment('inline');">Comment</button>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Flag field for review</h4><br>
<p>Leave a comment for other collaborators.</p>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input placeholder="Enter a review comment" name="textfield" id="textfield" maxlength="20" [(ngModel)]="textname">
</div>
<div class="modal-footer">
<button id="btnCancel" type='button' data-dismiss="modal" (click)="cancelClose('modal');">Cancel</button>
<button id="btnSave" type='button' data-dismiss="modal"(click)="saveComment('modal');">Comment</button>
</div>
</div>
</div>
</div>
</div>
然后是.ts代码
import { Component, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
textname: string = "";
inlinetext: string = "";
inlinelasttext: string = "";
slider: HTMLElement;
public ngOnInit() {}
public ngAfterViewInit() {
this.slider = document.querySelector("#slider") as HTMLElement;
}
public open() {
if ("Some condition") {
// Dont open the modal
} else {
// Open the modal
}
}
public cancelClose(wherefrom): void {
if (wherefrom === "modal") {
this.textname = "";
}
if (wherefrom === "inline") {
this.inlinetext = "";
this.trigger();
}
}
public saveComment(wherefrom): void {
if (wherefrom === "inline") {
alert("This is the value you saved INLINE: " + this.inlinetext);
this.inlinetext = "";
this.trigger();
}
if (wherefrom === "modal") {
alert("This is the value you saved MODAL: " + this.textname);
this.textname = "";
}
}
public trigger(): void {
this.slider.classList.toggle("slide-down");
}
}
然后是.css
.container{
padding:20px;
}
.info {
font-weight: bolder;
}
.contents {
background: lightgrey;
color: rgba(0, 0, 0, .8);
padding: 19px;
margin: 0;
border: 1px darkgrey solid;
width: 230px;
height: 120px;
}
.slide-up, .slide-down {
position: absolute;
visibility: hidden;
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
.contentsborder {
border: 1px 1px 1px 0px solid #000;
}
.inputfield {
margin-bottom: 5px;
}
#btnSaveInline {
float: right;
}
#btnCancelInline {
margin-left: 45px;
}
.first-name-pos {
top: 100px;
}
.show-slide {
visibility: visible;
}
.last-name-pos {
top: 145px;
}
最终的结果是这样的。https:/stackblitz.comeditangular-vmmxcc。