标签: angular-template

我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

在my-component,HTML是少数几个<td></td>从data1和呈现的数据data2.

但是在渲染之后,由于<my-component></my-component>我的CSS破坏导致所有my-componentHTML(整个表行)显示在第1列中.

结果如上:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

我尝试了以下方法:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

但这会导致错误Can't bind to 'data1' since it isn't …

我正在使用一个模板创建一个弹出菜单,如果有一个新的,它将显示警报,并且它一直在工作.但我想添加手动警报,这就是为什么我想添加输入文本但是Oupss,我不能在输入字段上写,我甚至不知道为什么.输入字段有点被禁用!!!

我的指示是这样的:

$scope.tb = { x: 0, y: 0 };

module.directive('myDraggable', function ($document, $interval) {
return {
    restrict: 'EA',
    replace: true,
    //scope : true,
    scope: { menu: '=drSrc'},
    link: function (scope, element, attr) {

        var startX = 0, startY = 0, x = scope.menu.x || 0, y = scope.menu.y || 0, positionX = [], positionY = [], time = [], width, height, moveInterval;

        element.draggable({
            position: 'relative',
            cursor: 'pointer',
            top: y + 'px',
            left: x + 'px'
        });

        element.on('mousedown', function …

我是Angular2的新建筑指令.我想要的是创建一个弹出指令,将一些css类包装内容.

内容

内容可以是纯文本和标题,如:

<div class="data">
    <h2>Header</h2>
    Content to be placed here.
</div>

然后我想给它一个指令属性,如:popup

<div class="data" popup>
    <h2>Header</h2>
    Content to be placed here.
</div>

该指令应该做的是将div包装在里面,让我们说:

<div class="some class">
    <div class="some other class">
        <div class="data">
            <h2>Header</h2>
            Content to be placed here.
        </div>
    </div>
</div>

我到目前为止描述的情况,这是一个属性或结构指令.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: `[popup]`
})

export class PopupDirective {


}

我正在创建一个Angular组件,它包含一个<button>带有一些附加功能的本机元素.如果它们被禁用并且我想要复制相同的功能,则按钮不会触发单击事件.即给定:

<my-button (click)="onClick()" [isDisabled]="true">Save</my-button>

有没有办法my-button防止onClick()被叫？

在Angular中,您可以通过这种方式监听主机点击事件,并停止传播事件:

//Inside my-button component
@HostListener('click', ['$event'])
onHostClick(event: MouseEvent) {
  event.stopPropagation();
}

这可以防止事件冒泡到祖先元素,但它不会阻止内置(click)输出在同一主机元素上触发.

有没有办法实现这个目标？

编辑1:我现在解决这个问题的方法是使用一个名为"onClick"的不同输出,消费者必须知道使用"onClick"而不是"click".这不是理想的.

编辑2:<button>成功停止源自元素的单击事件.但是如果你像我一样将元素放在按钮标记内,那么单击这些目标上的事件会传播到主机.嗯,应该可以将按钮包裹在另一个停止传播的元素中......

我在本地开发单页应用程序.

我似乎无法使用Angularjs中的简单自定义指令将HTML文件作为模板加载.如果我尝试使用该template:属性的原始html ,它工作得很好但我有超过400行代码我需要在这个模板中使用,并且一旦我尝试使用templateUrl:任何负载.我尝试了30种可能的路径,包括将HTML文件复制到许多不同的位置,例如C:/my-customer.html,这是我的项目结构:

    App--
        |
        css
        |
        img
        |
        js--
           |
           main.js
           |
           foundation.js
           |
           my-customer.html
        |
        templates--
                  |
                  my-customer.html
        |
        bcf.html
        |
        fluidType.html
        |
        start.html
        |
        my-customer.html

保持简单我使用角文档中的示例这里是我的指令代码(在我的控制器的main.js内):

app.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

再次,我尝试过路径,如:../my-customer.html ../templates/my-customer.html等等,但没有任何工作templateUrl:,我在Windows上没有本地Web服务器运行,如果这有帮助.

这是一些控制台错误,但作为一个新手不确定他们的意思,我有一种感觉,我需要运行一个Web服务器并解析通过http.

 XMLHttpRequest cannot load file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load …

我有一个哈希路由器,从我的主页面路由就好了.当新页面打开时,所有模板语法都被破坏,就会出现问题.这就是所有数据绑定,ngFors,甚至[routerLink].因此页面打开时没有角度逻辑,但是如果我在这些散列页面上刷新浏览器它们工作得很好.

app bootstrap file

import { enableProdMode } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { APP_ROUTER_PROVIDERS }  from './path-to-the-router-file';
import { ServerGetService } from './path-to-a-service';
import { AppComponent } from './app/app.component';

// depending on the env mode, enable prod mode or add debugging modules
if (process.env.ENV === 'build') {
  enableProdMode();
}

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  APP_ROUTER_PROVIDERS,
  {
    provide: …

如果我有以下内容:

<div *ngIf="user$ | async as user" class="container">
  <p>user.name</p>
</div>

当div上面的内容最终出现在屏幕上时,有没有办法可以执行代码？

我在同一个html文件中有下一个组件.

<app-form></app-form>
<app-results [hidden]="isOn"></app-results>
<app-contact-primary [hidden]="!isOn"></<app-contact-primary>
<app-contact-second [hidden]="!isOn"></app-contact-second>

在组件"app-form"中,我有两个按钮:

<button pButton label="Contact" (click)="">Contact</button>
<button pButton label="Results" (click)="">Results</button>

如果我点击按钮"联系"必须显示组件"app-contact-primary"和"app-contact-second"并隐藏"app-results"组件.

但是,如果我点击按钮"结果"必须隐藏组件"app-contact-primary"和"app-contact-second"并显示"app-results"组件.

我怎么能这样做？

谢谢

我在我的项目中使用Angular 5.2并且是角度框架的新手.我的组件html看起来像这样: -

我想添加style ="top:200px;" 在角度ts代码的上述屏幕截图中,使用class ="app-alerts"动态地突出显示突出显示的元素.具有"app-alerts"类的div元素被添加到渲染上的DOM中.

请建议代码更改.

我3天前开始学习角度,所以我很陌生.我还使用angularJS和React开发应用程序,我想我不明白角度5组件是如何完全工作的.如果我创建一个自定义文本的自定义按钮(我不是说这应该以这种方式完成,但这是一个显示我的观点的简单示例),如下所示:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

渲染的DOM导致:

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

这是不可读的,我想知道是否有办法删除这个包装元素,只是放置组件布局替换标签导致以下结构:

<button>
  <span>
    My Text
  </span>
</button>

如果没有办法删除它们你的建议是什么？谢谢!