CODEWITHSUNDEEP
angulartypescript
Xi Sigma
Xi Sigma

Reputation: 2372

Parent and Ancestor annotation in ts

Trying to add the Parent and Ancestor annotations to TypeScript typings so I did:

declare module "angular2/src/core/annotations_impl/visibility"{
   function Parent():(target: any) => any;
   function Ancestor():(target: any) => any;
}

Using either of the annotations throws "TypeError: decorator is not a function".

I am using alpha 22.

Why do I get this error?

Here is a sample:

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component,View,bootstrap} from "angular2/angular2"
import {Ancestor,Parent} from "angular2/src/core/annotations_impl/visibility"

@Component({
    selector:"c"
})
@View({
    template:`<p>{{app.message}}</p>`
})
class C{
    app:App;
    constructor(@Ancestor() app:App){
        this.app = app;
    }
}

@Component({
    selector:"app"
})
@View({
    template:`<c></c>`,
    directives:[C]
})
class App{
    message = "test";
}
bootstrap(App);

HTML:

<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
  <body>
    <!-- The app component created in app.ts -->
    <app></app>
    <script>
      System.import('app');
    </script>
  </body>
</html>

Upvotes: 2

Views: 1012

Answers (1)

Krustie101
Krustie101

Reputation: 96

For me this worked by using your original form but declaring it in the module 'angular2/annotations' instead.

Sorry, I did not try your example but the tabs example by Pascal Precht. I am not sure if you can view App as an ancestor of C since "App is replaced by C".

The following adaptation works for me. I still got your error below when the definitions of B and C were in the reverse order, which seems silly.

import {bootstrap, Component, View, For} from 'angular2/angular2';
import {Ancestor,Parent} from 'angular2/annotations';


@Component({
   selector:"b"
})
@View({
   template:"<content></content>"
})
class B{
   message : string = "test";
}

@Component({
   selector:"c"
})
@View({
   template:`<p>{{b.message}}</p>`
})
class C{
   b:B = null;
   constructor(@Ancestor() b:B){
      this.b = b;
   }
}



@Component({
  selector:"app"
})
@View({
   template:`
   <b>
      <c></c>
   </b>
`,
directives:[B,C]
})
class App{

}


bootstrap(App);

Upvotes: 2

Related Questions