角度:从控制器隐藏组件

Question

所以我是 Angular

JS(1.6.4)的新手。我有一个组件，我想使用控制器以编程方式隐藏/显示。 不幸的是，我不明白如何抓住我的组件，然后将 ng-hide 设置为 false。

现在，我的控制器在服务呼叫中看起来像这样。 当数据返回时，我想运行我的隐藏/显示逻辑：

<div id="container" class="flex-container"><!-- flex container -->
<div class="box" id="redbox" class="flex-item"><!-- flex item -->
<input id="searchTermInput" class="search-input">
</div>
<div class="box" id="greenbox" class="flex-item"><!-- flex item -->
<button id="searchButton" class="search-button" (click)="runSearch($event)">
Search
</button>
</div>
<hr width="100%" class="divider-line" ng-hide="dividerHider">
<div class="flex-item search-results">
<ul class="heroes">
<li *ngFor="let result of searchResults">
<span class="badge">{{result.id}}</span> {{result.title}}
</li>
</ul>
</div>
</div>

.

import { Component } from '@angular/core';
import {SearchService} from "./search.service";
import {SearchResult} from "./search-result";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [SearchService]
})
export class AppComponent {
title = 'app';
searchResults: SearchResult[];
constructor(private searchResultService: SearchService) { }
runSearch(ev): void {
var q = 100;
this.searchResultService.getHeroesSlowly().then(searchResults => {
this.searchResults = searchResults;
alert("Hello! I am an alert box!!" + this.searchResults.length);
//Call hide component here
}
)
}

}

我已经完成了以编程方式隐藏内容的研究，但他们的代码似乎根本不使用控制器。 例如，在此响应中

AngularJS： ng-show/ng-hide

和这里

AngularJS - ng-hide与不同的ng-controller一起隐藏

我完全不知道关于"$scope"的代码应该去哪里。

任何帮助将不胜感激。

编辑：解决方案

我最终使用了这个结构。

...
<hr width="100%" id="divider" class="divider-line" *ngIf="showDivider">
...
export class AppComponent {
showDivider = false;
runSearch(ev): void {
this.searchResultService.getHeroesSlowly().then(searchResults => {
this.showDivider = true;
}
)
}
}

Answer 1

看来您的问题是如何在 ES6 中使用角度 1.6。也许这篇博客将帮助您更好地了解如何使用 es6 为您的组件构建作用域。

https://nazargargol.com/scope-watch-with-angular-es6-class/

对于手头的任务，我可以推测(我没有使用 es6 语法，而且您没有代码笔示例可供使用)，将您的代码更改为：

this.searchResultService.getHeroesSlowly().then(searchResults => {
this.searchResults = searchResults;
alert("Hello! I am an alert box!!" + this.searchResults.length);
//Call hide component here
this.scope.show_results = true;
}
)

和你的 html 到：

<div class="flex-item search-results" ng-show="show_results">
<ul class="heroes">
<li *ngFor="let result of searchResults">
<span class="badge">{{result.id}}</span> {{result.title}}
</li>
</ul>
</div>

应该做这个技巧(提供，ofc，默认情况下在构造组件时创建空范围，您可以向其添加"search_results")。

一般来说，ng-hide，ng-show，ng-if使用的是$scope中定义的变量/方法，因此您需要构造正确的范围。

Answer 2

您可以在第一次加载 html 内容时从角度代码中添加变量语句，例如this.show_search = true;。然后在搜索结果中，您可以在希望更改此变量时更改此变量(如果可以从相同的 js 角度代码读取)。我说的是下面这样的东西(假设你想隐藏搜索div)：

<div class="box" id="redbox" class="flex-item" ng-show="show_search">
<input id="searchTermInput" class="search-input">
</div>

然后在 runSearch() 函数中将此变量更改为this.show_search = false;。然后，您要隐藏的html内容将不会出现。

另一个问题是检查对象搜索结果是否存在，并根据该结果显示您的内容：

<div class="box" id="redbox" class="flex-item" ng-hide="searchResults">
<input id="searchTermInput" class="search-input">
</div>

最后一个解决方案：您还可以将变量初始化为 html 内容(以防第一次 html 内容加载在搜索后不使用相同的角度代码通信)，然后以与第一个解决方案相同的方式使用它。如下所示：

<div id="container" class="flex-container" ng-init="show_search=true">
<div class="box" id="redbox" class="flex-item" ng-show="show_search">
<input id="searchTermInput" class="search-input">
</div>
.....
</div>

从我的方法到你的代码可能会有所不同，以防它不起作用，但这是主要思想。因此，您可以检查如何根据您的结构调整它。还要检查您的 html 内容是否与除服务之外的适当 js angular 控制器通信。这也将使您在设置新功能和变量方面的生活更轻松。

当然，你可以使用 jquery，从 html 内容中读取你的 id，然后隐藏它：$("#searchTermInput").hide();