Angular - 防止触发onClick“parent”元素

时间:2017-07-07 19:41:33

标签: angular typescript

我有这个(摘录一个)模板:

<?php 
if (isset($_GET["mainSearch"])) 
{
  $condition = '';
  $query = explode(" ", $_GET["mainSearch"]);

  foreach ($query as $text) 
  {
      //change condition query
      $condition .= "question LIKE '%".SQLite3::escapeString($text)."%' OR ";
  }
  $condition = substr($condition, 0, -4);


  $sql_query = "SELECT * FROM questions WHERE " . $condition;
  $sql_query_count = "SELECT COUNT(*) as count FROM questions WHERE " . $condition;
  $result = $db->query($sql_query);

  //count query result to display something else if no records where found.
  $resultCount = $db->querySingle($sql_query_count);

  if ($resultCount > 0)
  {
  if ($result)
  {
      while ($row = $result->fetchArray(SQLITE3_ASSOC))
      {
           echo '<div class="quesbox_3">
            <div class="questitle">
                <h2>'.$row["question"].'</h2>
            </div>
            <div class="quesanswer">'.$row["answer"].'</div>
        </div>';
      }
  }
  }
  else
  {
      echo "No results found";
  }
}
?>

...和这个“组件”类:

<custom-panel [summary]="summary.activity" routerLink="/activities">
  <a *ngIf="(user$ | async)?.verification.isOK" (click)="openQuestionModal()">Verify</a>
</custom-panel>

问题是:每当我点击链接打开“问题模态”时,它也会将我带到// imports here @Component({ selector: 'custom-panel', templateUrl: './custom-panel.component.html', styleUrls: ['./custom-panel.component.scss'] }) export class CustomPanelComponent implements OnInit { public summary$: Observable<Summary>; public user$: Observable<User>; constructor(private service: UserService, private dialog: MdDialog) { // ... } public ngOnInit() { // Populate this.user$ // Populate this.summary$ } public openQuestionModal(): void { console.log('openQuestionModal() ...'); } } 路径(最终会在那里打开模态对话框)。

有没有办法阻止这种情况?

我到目前为止找到的唯一方法是使用布尔“标志”并将/activities指令更新为:[routeLink]。我想摆脱那个“旗帜”。

1 个答案:

答案 0 :(得分:2)

您是否尝试过使用stopPropagation

(click)="openQuestionModal($event)"

  public openQuestionModal(event): void {
    event.stopPropagation();
    console.log('openQuestionModal() ...');
  }