小编Mil*_*lad的帖子

我正在绑定一个滚动事件来捕获滚动并用它做一些事情,我创建了一个像bellow一样的指令:

所以我有简单的指令,除了:

      constructor ( private el : ElementRef ,
                        private renderer : Renderer ) {
              this.domAdapter = new browser.BrowserDomAdapter();
              this.ruler      = new Ruler( this.domAdapter );
      }
      ngAfterViewInit () : any {
              this.renderer.listenGlobal( 'window' , 'scroll' , ()=> {
                  console.log( 'scrolling' );
              } );
              return undefined;
      }

这工作正常,期望我可以看到它在我的所有应用程序中触发滚动更改检测.

这是我的一个组件内部:

     private  aFunction () {
             console.log( 'change detected !!!' );
     }

我aFunction在某个组件的某个地方有一个模板:

       <div>{{ aFunction() }}</div>

之前,aFunction只有当我更新了一些输入或点击了一个按钮时才会被解雇,但现在,它正在滚动时进行更改检测!因此,我的滚动体验是滞后的!

这是Angular2的正常行为,所有事件都应该触发更改检测,但我想从此规则中排除我的滚动事件.

简而言之,如何在Angular2中定义一个事件,并将其转换为触发变更检测并使其成为手动的能力.

我在找 :

    this.renderer.listenGlobalButDontFireTheChangeDetection

我在Angular应用程序中使用SignalR.当我在Angular中销毁组件时,我也想停止与集线器的连接.我使用命令:

this.hubConnection.stop();

但是我在Chrome控制台中收到错误: Websocket已关闭状态代码:1006

在Edge中:错误错误:未捕获(在承诺中):错误:由于连接被关闭而取消了调用.错误:由于连接已关闭而取消了调用.

它实际上工作,连接已经停止,但我想知道为什么我得到错误.

这就是我启动集线器的方式:

this.hubConnection = new HubConnectionBuilder()
      .withUrl("/matchHub")
      .build();

    this.hubConnection.on("MatchUpdate", (match: Match) => {
      // some magic
    })

    this.hubConnection
      .start()
      .then(() => {
        this.hubConnection.invoke("SendUpdates");
      });

编辑

我终于找到了这个问题.它是由Mongo改变流引起的.如果我从SendUpdates()方法中删除代码,则会触发OnDisconnected.

    public class MatchHub : Hub
    {
    private readonly IMatchManager matchManager;

    public MatchHub(IMatchManager matchManager)
    {
        this.matchManager = matchManager;
    }

    public async Task SendUpdates() {
        using (var changeStream = matchManager.GetChangeStream()) {
            while (changeStream.MoveNext()) {
                var changeStreamDocument = changeStream.Current.FullDocument;
                if (changeStreamDocument == null) {
                    changeStreamDocument = BsonSerializer.Deserialize<Match>(changeStream.Current.DocumentKey);
                }
                await Clients.Caller.SendAsync("MatchUpdate", changeStreamDocument); …

我正在尝试为CORS配置Spring以使用Angular Web UI:

我试过这个:

@Configuration
@ComponentScan("org.datalis.admin.config")
public class AppConfig {

    @Bean
    public static PropertySourcesPlaceholderConfigurer propertyConfigurer() {
        PropertySourcesPlaceholderConfigurer conf = new PropertySourcesPlaceholderConfigurer();
        conf.setLocation(new ClassPathResource("application.properties"));
        return conf;
    }

    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("127.0.0.1");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

具有Angular FE的Apache服务器在同一服务器上运行Wildly服务器,因此我为源配置了127.0.0.1.

但我仍然得到:

Access to XMLHttpRequest at 'http://123.123.123.123:8080/api/oauth/token' from origin 'http://123.123.123.123' has been blocked by CORS policy: Response to preflight request doesn't …

有几种方法可以从Angular2中的元素中获取样式:

假设您在组件或指令中:

1-使用nativeElement:

    let color = elementRef.nativeElement.style.color;

但是,建议不要这样做,因为如果您打算将来使用类似Web工作程序的东西,则不希望直接访问nativeElement.

2-使用标尺:

    this.domAdapter = new browser.BrowserDomAdapter();
    this.ruler      = new Ruler( this.domAdapter );
    this
        .ruler
        .measure( this.elementRef )
        .then( ( rect ) => {
           // Now we have access to height and width and left and top 
        } );

这很酷,但是统治者不会给我颜色或任何其他样式,基本上标尺只给出Rectangle(基本上是Element.getBoundingClientRect()).

而且,我们不能使用Renderer来获取元素样式,它只提供设置样式的方法.

我从他们发布它的那天起就一直在使用Angula2 + Universal,但今天我对它的实际工作方式感到困惑.

在他们的示例中,在server.ts文件中,您将找到:

app.get( '/data.json' , ( req , res ) => {
    res.json( {
        data : 'This fake data came from the server.'
    } );
} );

如果您运行该应用程序,右键单击并查看页面源代码,您将在源代码中找到"此伪造数据来自服务器",这意味着该页面已在服务器中呈现？( 它是否正确 ？ )

到目前为止,太棒了.

接下来是app.ts,你可以找到:

ngOnInit () {
        setTimeout( () => {
            this.server = 'This was rendered from the server!';
        } , 10 );
}

同样,该文本也可以在页面源中找到.

现在这里是我的奇怪部分:

如果您出于任何原因增加服务器延迟,如:

app.get( '/data.json' , ( req , res ) => {
    setTimeout( function() {
        res.json( {
            data : 'This fake data …

假设我们导入一个Angular Material模块:

 providers:[],
 imports : [MaterialInput]

在里面MaterialInput,有一个名为MaterialInputComponent的组件

出于某些原因,我想用自己的方法覆盖该组件

所以我希望能够说:

 providers:[
    {
       provide: MaterialInputComponent,
       useClass : MyOwnInputComponent
    }
 ],
 imports : [MaterialInputModule]

我知道我们可以覆盖这样的服务,但是它也可以用于组件或指令吗？

更新:我不是在寻找组件继承,我想要的是使用类似的东西,Material Module但有时我想覆盖它的组件行为,就像你使用服务一样.

喜欢 :

如果这是MaterialInput组件背后的原始代码,它位于我的节点模块中.

  @Component({})
  export class OriginalMaterialInputComonent{
        greet(){ alert('Say Aloo'); }
  }

我有一个类似的类:

  @Component({})
  export class OverrideMaterialInputComonent{

        greet(){ alert('Say yes we can'); } // overriden function
  }

并且,假设我正在导入空洞MaterialInputModule

declarations:[
   {
    provide: OriginalMaterialInputComonent,
    useClass : OverrideMaterialInputComonent
  }
],
  imports : [MaterialInputModule]

那可行吗？

您好,这是我第一次在stackoverflow上提问.我正在开发angular2:v2.1.0(typescript-v2.0.10)中的应用程序.我使用"ng2-file-upload"进行文件上传.HTML代码如下:

<div class="container-fluid">
    <h5 class="titleCenter"> File Upload </h5>
    <div class="drop-zone" ng2FileDrop
         [ngClass]="{'nv-file-over': hasBaseDropZoneOver, 'pointerBan': testDisablDropZone}"
         (fileOver)="fileOverBase($event)"
         [uploader]="uploader">
        <span *ngIf="isUploaderEmpty(uploader.queue)">Drop Down box for the CSV file only...!!!</span>
        <span *ngFor="let item of uploader.queue" >
            <p class="row" >
                <i class="fileIcon"></i>
                <strong>{{ item?.file?.name }}</strong>
                <a class="fileUploadRemoveButton fa fa-times-circle" (click)="item.remove()"></a>
            </p>
        </span>
    </div>
    <div  [ngClass]="{'activeCheckButton': testDisablDropZone}" class="CheckboxZone" (click)="disableDropZone($event)" style="margin-top: 10px">
        <span>Click here to disable the dropdown box.</span>
    </div>
</div>
<button type="button" (click)="test($event)">click</button>

这里当我点击带有'CheckboxZone'类的div时,它会调用函数'disableDropZone($ event)',但之后它也会调用函数'idUploadEmpty()'.按钮的情况相同也点击.组件的代码如下:

const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
@Component({
    selector: 'fileupload',
    templateUrl: './fileupload.component.html',
    styleUrls: ['./fileupload.component.scss'] …

有没有简单的方法来检查字符串的第一个和最后一个字符是否相同,只有正则表达式？

我知道你可以咨询charAt

var firstChar = str.charAt(0);
var lastChar = str.charAt(length-1);
console.log(firstChar===lastChar):

我不是要求这个:正则表达式匹配第一个和最后一个字符

看看*ngIf的源代码:

@Input()
  set ngIf(condition: any) {
    if (condition && !this._hasView) {
      this._hasView = true;
      this._viewContainer.createEmbeddedView(this._template);
    } else if (!condition && this._hasView) {
      this._hasView = false;
      this._viewContainer.clear();
    }
  }

我可以使用下面的组件:

@Component({})
class MyComponent{

     constructor ( 
              public _template : TemplateRef,
              public _viewContainer : ViewContainerRef) {
    }

   onSomeButtonClick(condition){
       if(condition){
          removeMyView();
       }else{
          putTheViewBackIfItsRemoved();
        }
   }
}

试图ngIf在组件内部使用逻辑不起作用,我认为这是因为组件的viewContainerRef是空的

编辑:

只是提到我不是要隐藏视图,想要从DOM中删除它.

换句话说,我们可以像ngIf的主机元素吗？我知道你不能在主机上发出指令,这就是为什么我认为可能使用ViewContainer和TemplateRef你可以达到同样的目的.

另一件事是,在使用Angular并创建动态组件之后,我现在唯一的方法是使用ViewContainerRef在DOM中创建一个新组件,但我的重要问题是,Angular本身是否以相同的方式创建组件？

如果是的话,我们不能以某种方式访问​​容纳组件的容器吗？

对于那些刚刚开始学习Angular并希望在这里有所帮助的人(感谢你),我应该说我真诚地知道如何在我的模板中使用ngIf:

我现在知道什么是ngIf以及它做了什么:

但是:

 <div *ngIf="condition"></div>

不是我的意思,只是因为这可能会删除我的模板中的内容,我必须将所有内容包装在div中以使其工作,这不是我想要的.

我想在内部使用ngIfing清除模板.

更新:

要澄清一下:

换句话说,就像在主机上有一个ngIf:

@Component({

  host:{
    '*ngIf':'shouldBeRemoved'
  }
})
class MyComponent{ …

我们可以做到这一点：

interface IMyInterface{
    firstname:string  // this means firstname is mandatory

    name:string  // this also means name is mandatory
}

我该怎么说，firstname还是name可选（?），取决于是否提供了另一个？

或者，如果那不可能，还有哪些其他选择？

编辑：这不是Typescript接口的重复-可能需要“一个或另一个”属性吗？。

我们不想为每个可选元素创建一个单独的接口，仅仅是因为维护，命名和重构会很麻烦，并且不可重用。

我想获得PHP中链接的标题(或名称？).说我有这样的链接:

<a href="example.php">This is title</a>

当我点击这个链接时,它会把我带到example.php,在那个页面我想得到"这是标题"

我怎么能用PHP或JavaScript或者......？

是否有一种基于条件加载某些css文件的简单方法

例如 :

这是我的网站:

     www.example.com/en <------------

en是我们的语言,它可以是fr或tr或者其他什么,

我们不能说吗？

   if (en){
         load this css file

    }else{
         load another css file

    }

我希望这在Php MVC环境中工作,这个css文件是高级引导程序,它们是网格流顺序(方向)中的Rtl或ltr.

我可以访问en 作为变量,所以我知道它是en还是其他但我认为页面加载会停止,直到所有css文件都被下载

我正在尝试制作一个方法,为我创建一个包含图像的行我的代码:

function makeRow($name,...){
    $r = '';
    $r .= "<img src=img/mamet.jpg style=padding:3px width=100% height=100% >";
    return $r;
}

但是你看到宽度和高度之后的那个"%"？

它不工作:(似乎PHP双引号和单引号有这个字符的问题:%(百分比)我该怎么办？我甚至尝试过这些:

\%
\\%
"%"
'%'

但仍然没有工作:(