Angular：从控制器中隐藏组件[重复]

Posted 2023-03-13

【中文标题】Angular：从控制器中隐藏组件[重复]

【英文标题】：Angular: Hide component from controller [duplicate]

【发布时间】：2017-11-20 22:01:04

【问题描述】：

所以我是kAngularJS(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  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

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

非常感谢任何帮助。

编辑：解决方案

我最终使用了这个结构。

...
<hr  id="divider" class="divider-line" *ngIf="showDivider">
...

export class AppComponent 
  showDivider = false;

  runSearch(ev): void 

    this.searchResultService.getHeroesSlowly().then(searchResults => 
        this.showDivider = true;
      
    )
  

【问题讨论】：

您的代码和模板使用 Angular 2+ 语法。 ng-hide 指令是 AngularJS (Angular 1.X)。 Scope 和 ng-hide 不是 Angular 2+ 的一部分。

代码导入@angular/core。那是 Angular 2+ 而不是 AngularJS 1.6.4。

正如问题所言，这根本不是重复的，因为它询问如何“以编程方式从控制器中隐藏”。链接的问题没有回答。

【参考方案1】：

看来您的问题是如何将 Angular 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_results”）。

一般来说，ng-hide、ng-show、ng-if 使用的是 $scope 中定义的变量/方法，所以你需要构造正确的作用域。

【讨论】：

我尝试注入 $scope 变量，但它抱怨：未捕获的错误：无法解析 AppComponent 的所有参数：(?, [object Object])。除了英雄教程之外，我没有看到太多证据表明有人在使用 ES6 的东西。

【参考方案2】：

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

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

然后在 runSearch() 函数中将此 var 更改为 this.show_search = false;。那么你要隐藏的html内容就不会出现了。

另一种解决方案只是检查对象 searchResults 是否存在，并据此显示您的内容：

<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();