角度：从控制器隐藏组件

Question

所以我 k新角度 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 with different ng-controller

我完全不知所措到关于“$范围”的代码是应该去。

任何帮助，非常感谢。

编辑：解决方案

我最终使用这种构造。

... 
<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

你可以从你的角度代码第一次添加变量语句，例如this.show_search = true; HTML内容负荷。然后进入searchResults，当你想改变它时，你可以改变这个变量（如果它可以从相同的js角码中读取）。我说的是类似下面（假设你要隐藏的搜索格）：

<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内容将不会显示。

另一个sulution只是检查对象SearchResult所存在并根据该显示内容或不：

<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角度控制器进行通信。这也会让你的生活更轻松，同时也可以设置新的功能和变量。

当然，你可以使用jQuery的，并从HTML内容读取您的ID，只是将其隐藏：$("#searchTermInput").hide();

Answer 2

看来，你的问题是如何使用的角度用1.6 ES6。也许这个博客将帮助您更好地理解如何使用es6为您的组件构建范围。

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

手头的任务，我可以推测（我没有使用ES6的语法已经和你没有codepen样品一起玩），即改变你的代码：

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_resu它'）。一般来说，ng-hide，ng-show，ng-if使用$ scope中定义的变量/方法，所以你需要构造正确的作用域。